백엔드 개발자에게 HTML/CSS/JS 란?

최민수·2023년 3월 13일

htmlcss 추가공부

프로그래밍 언어

목록 보기

3/14

백엔드 개발자에게 HTML/CSS/JS 란?

두 줄 요약

필요하다. 그래야 프로젝트 완성 후 배포를 할 수 있고 → 사람들에게 보여줘서 피드백을 얻을 수 있고 → 결과적으로 성능개선으로 이어진 경험이 생긴다. (면접 / 자소서 경험, 프로젝트 경험)

React, Vue 처럼 프레임워크를 배울 필요는 없다. 그러나 css의 중요한(가성비 좋은) 기능, html이 동작 방식, javascript 태그 selector, jquery 와 같은 기본적인 문법은 알고 있어야 한다.

CSS 에서 알아야 할 필수 기능

Flex (Flexbox)

Flex Container 에 적용되는 속성

display: flex /* 태그 컨테이너에 flex 기능을 사용할 것임을 표시 */

flex-direction: /* 정렬할 방향 설정. ex) row-reverse, column */

flex-wrap: /* item 배열을 한줄에 할 것인지 여러 줄에 할 것인지 결정  ex) wrap */

flex-flow: /* 앞의 flex-direction과 flex-wrap은 같이 많이 쓰이기 떄문에 이 둘을 묶은 기능
							ex) row-reverse wrap */

justify-content: /* main-axis 정렬 ex) center, space-between
										만약 flex direction이 column 기준으로 배열 돼있으면
										main-axis는 세로축이다. */

align-items: /* 반대축(cross-axis) 상 정렬  ex) flex-start, center */

align-content: /* 반대축 상에 여분의 공간 조절 ex) center, flex-start */

Flex Item 에 적용되는 속성

order: /* 개별 item의 순서를 정해줌. ex) .yellow { order: 1} */
flex-grow: / flex-shrink: /* 개별 item의 크기를 조절. ex) flew-grow: 2 */
align-self: /* 개별 item의 위치 조절. ex) center, flex-start */
		```

Display, Position

Display: 요소를 어떻게 보여줄지 결정.
- none: 아예 그리지 않음.
- block: 블록 형태로 관리. → 줄바꿈. width, border 지정 가능.
- inline: 인라인 형태로 관리. → 줄바꿈X, width, height 지정 X.
- inline-block: block과 inline의 중간 형태로 관리. → 줄바꿈X, 크기 지정 가능.
Position: absolute, relative, static 속성을 기억!
- absolute: 가장 가까운 상위 요소를 기준으로 위치 설정( top: 10px, bottom: 20px .. ). 겹침 허용.
- relative: 요소를 원래 위치에서 벗어나 배치할 수 있게 해줌. 겹침 허용X
- static: Default 값. HTML에 작성된 순서 그대로 적용. offset 값 무시됨.

Note) padding, margin, css selector 등은 어떤 개념인지만 알아두고, 필요할 때 검색해서 써먹는 정도로 충분하다!

Tailwind CSS 프레임워크

HTML 코드에서 미리 세팅된 CSS 클래스를 활용해 스타일링 할 수 있게 도와주는 프레임워크.
장점
- CSS의 속성들을 클래스에 직관적으로 표현해서 쓰기 쉽다. 그저 조합해서 사용하면 된다.
- <div class="shrink-0"> ← 이런 식으로.
- 공식문서가 매우 친절하다. ^^
단점
- 개인적으로 느끼기에는 코드가 직관성은 좋으나 가시성이 나쁘다.
- <div class="bg-slate-100 rounded-xl p-8 dark:bg-slate-800"> ← 이런 식으로.
- 미리 만들어진 프레임워크라 용량이 커진다.