같은 조건의 요소에 색 혹은 백그라운드만 변경하고 싶을 때, 선택자를 이용해 따로 클래스를 지정하거나 혹은 nth-child로 지정하곤 한다. 그런데 지정하는 수가 두 세개 쯤이라면 상관이 없겠다만 그 이상이라면? 게다가 수정을 해야하는 상황이라면..? 이럴 때 필요한 것이 사용자 정의 속성! 선택자로 따로 지정하지 않아도 저장한 값을 불러오기만 하면 된다. 1. HTML 데이터 속성 attr HTML 태그는 태그의 선언과 속성들로 구성된다. 이 때 태그의 속성(attribute)이라는 것은 현대 태그에 추가적인 정보를 제공하는 일종의 메타데이터(Metadata)이다. [- 출처](https://velog.io/@gga01075/HTML%ED%83%9C%EA%B7%B

유연하게(flexible) 레이아웃을 배치하는 flexbox! 이미 레이아웃 속성에 정리해 뒀지만 확실하게 익히고 싶어 더 자세히 정리해본다 ✍️ flex는 부모요소(container)와 자식요소(item)에 쓸 수 있는 속성이 다르다. 부모요소 속성 🔹 display: flex; vs inline-flex; >동일한 순위의 부모태그를 두개 만들었을 때, display: flex;는 블록요소처럼 수직으로 컨텐츠가 나열되지만 display: inline-flex;는 인라인요소

몇몇의 웹페이지 그리고 강의를 보며 코드를 분석하다가 클래스명에 의문이 생겼다. 어떤 페이지는 하이픈을 쓰고, 또 어떤 페이지는 언더바를 쓰고.. 사람마다 다 다른 스타일로 짜여져 있었기 때문이다. 네이밍에 기본적인 규칙은 없는지 단지 개인의 기호일 뿐인 건지 궁금해졌다. 이번 학습 목표는 어떤 식으로 네이밍을 짜야 효율적이고 가독성이 좋은 것인지 알아보고 나만의 CSS 컨벤션을 세워 일관성있는 코딩을 하게 되는 것..! Q1. Coding Convention 이란? 해당 언어로 작성된 프로그램의 각 측면에 대한 프로그래밍 스타일, 관행 및 방법을 권장하는 특정 프로그래밍 언어에 대한 일련의 지침이다. 즉, 나 외에 다른 사람들도 내가 작성한 코드를 보고 쉽고 빠르게 이해할 수 있도록 하나의 작성 표준을 정해둔 것. 코딩 컨벤션의 장점은 생산성과 가독성이 높아진다는 것이다. ex ) [에어비앤비](https://github.com/CodeMake

layout이란 웹사이트를 구성하는 요소들을 배치할 공간을 분할하고 정렬하는 것이다. 공간을 분할할 때는 먼저 행을 구분한 후, 행 내부 요소를 분리하는 것이 일반적이다. 핵심은 블록 요소들을 원하는 위치에 배열하는 것! 레이아웃에 관련된 속성들을 익혀보자✨ 1. float 주로 레이아웃을 구성할 때 블록 요소를 가로 배치하기 위해 사용. 박스를 왼쪽 또는 오른쪽으로 이동하거나 이동하지 않음을 지정. position 속성 값이 static인 요소에 적용되고, 기본 값은 none이다. 본래 아래 예제와 같이 이미지와 텍스트가 있을 때, 이미지 주위를 텍스트로 감싸기 위해 만들어진 것이다. flexbox 레이아웃를 사용한다면 더욱 간단하게 정렬을 구현할 수도 있지만 fl

Cascading Style Sheets 웹사이트가 실제 표현되는 방법을 기술하기 위한 스타일 언어(style sheet language)이다. HTML 문서 내에 HTML 태그를 선택해서 디자인하고 배치하는 역할. 요소의 브라우저 스타일링인 가장 위에서부터 순차적으로 스타일링이 적용되는 모습을 따서 Cascading Style Sheets라고 지었다. 0. CSS 기본 문법 selector(선택자) : { property(속성): value(값); } css 속성과 값은 영어 단어 뜻 속에 모두 담겨있다 예를들면 1. Selector 선택자 ![](https://velog.velcdn.com/images/go