김수정 블로그 김수정 블로그

px (pixels): 픽셀은 디지털 화면에 표시되는 가장 작은 단위이다. 고정된 크기를 가지며, 따라서 다른 요소나 설정에 영향을 받지 않는다. em: em 단위는 상대적인 단위로, 해당 요소의 부모 요소의 글꼴 크기에 상대적이다. 예를 들어, 부모 요소의 글꼴 크기가 16픽셀이고 자식 요소의 글꼴 크기가 1em으로 설정되면, 자식 요소의 글꼴 크기도 16픽셀이 된다. 만약 자식 요소의 글꼴 크기가 2em으로 설정되면, 그것은 부모요소의 두 배인 32픽셀이 됩니다. rem (root em): rem도 상대적인 단위지만, HTML 문서 최상단 루트(root)요소()의 글꼴 크기에 기반한다. 이렇게 하면 사이트 전체에서 일관된 스타일링을 쉽게 유지할 수 있다. vw (viewport width) : 하나의..

- 태그 선택자 태그명 { 속성: 속성값; } - id 선택자 #id명 { 속성: 속성값; } - class 선택자 .class명 { 속성: 속성값; } - 부모 자식 선택자 선택자1 > 선택자2 { 속성: 속성값; } // 선택자1이 부모 element, 선택자2가 자식 element // 부모 태그 하위에 있는 선택자2에 해당하는 모든 자식 태그에 스타일을 적용 - 자손 선택자 선택자1 선택자2 { 속성: 속성값; } // 선택자1 이 부모 element, 선택자2가 자손 element // 부모 태그 하위에 있는 선택자2에 해당하는 모든 자손 태그에 스타일을 적용 어떤 태그의 모든 하위 태그에 적용하고 싶으면 자손 선택자를, 어떤 태그의 자식 태그에만 적용하고 싶으면 자식 선택자를 사용 - 다중 조..

아이템들이 배치된 방향의 축을 메인축(Main Axis) 메인축과 수직인 축을 수직축 또는 교차축(Cross Axis) flex컨테이너에 적용하는 속성 - display : flex; .container { display: flex; /* display: inline-flex; */ } - flex-direction 이 CSS 속성은 다음의 값들을 인자로 받아 컨테이너 안에서 요소들이 정렬해야 할 방향을 지정 row: 요소들을 텍스트의 방향과 동일하게 정렬합니다. (기본값) row-reverse: 요소들을 텍스트의 반대 방향으로 정렬합니다. column: 요소들을 위에서 아래로 정렬합니다. column-reverse: 요소들을 아래에서 위로 정렬합니다. - flex-wrap 컨테이너가 더 이상 아이템들을..

한줄 단위로 적용 줄바꿈 안에있는 입력되는글자크기에 따라 정하기 때문에 크기조정 안됨, height, width가없음 - emphasize - 중요한 문구를 강조하는 HTML 태그 중 하나 - (기본) 글자가 기울임체로 표현 상속이란 상위(부모, 조상) 요소에 적용된 프로퍼티를 하위(자식, 자손) 요소가 물려받는 것을 의미 상속 기능이 없다면 각 요소의 Rule set에 프로퍼티를 매번 각각 지정해야 함. 하지만 모든 프로퍼티가 상속되는 것은 아님. 프로퍼티 중에는 상속이 되는 것과 되지 않는 것이 있는데 font, color, visibility, opacity, line-height, text-align, white-space 이 상속 가능 *스타일 시트(CSS) 파일을 로드하는 방법 1.link태그..