이파닭 IT 이파닭 IT

태그 위치 관련 스타일 position 은 태그의 위치를 지정하는 속성 position : relative; (상대적인) - 지정된 태그 내부에 다른 태그가 상대적인 위치에 지정할 수 있도록 기준이 되게 만드는 속성 position : absolute; (절대적인) - 기본 태그의 배치 순서를 무시하고 지정된 절대 위치에 태그 배치 position : fixed; (고정된) - 항상 고정된 위치에 태그를 배치함 (화면이 움직이든 말든 항상 같은 위치에 존재) position : sticky; (스크롤에서 많이 사용) - 특정 스크롤 위치에 도..

정렬을 도와주는 float clear float : 뜨다 (java float 과 다름) 태그를 띄어서 좌우로 정렬하는 속성 float 을 지정하지 않은 태그와 지정된 태그가 겹치는 문제 발생 clear : float 으로 인해 띄워져 잇는 상태를 해제하는 속성 태그 겹침 문제를 해결 float, clear (왼쪽 : left) 1 2 3 4 안녕하세요 반 갑 습 니 다 1 2 3 ..

태그의 여백 관련 스타일 1. padding 태그 영역이 넓어짐 내용과 선 사이의 공간 2. border 테두리 영역이 어디까지 영역인지 구분하기 위한 선 3. margin 여백 간격 다른 태그와 간격을 나타내는 영역 border(테두리) 영역 내용 내용 마진 내용 padding margin border 방향성 000 - padding, margin, border 를 나타냄 000-top : 크기 -> 위쪽 방향 크기 지정 000-bottom : 크기 -> 아래쪽 방향 크기 지정 ..

레아이웃(layout) 사용 목적을 기반으로 시각적 효과를 구성하는 행위 사전적 의미 : 배치, 정리 기술적 의미 : 구성 요소를 제한된 공간에 효울적으로 배치하는 것 display : 화면에 표시나 형식에 대한 배치 지정 태그가 화면에 어떻게 보여질지 형식을 지정하는 속성 - block : 화면을 수직 분할(한 줄 다 차지) + 가로(width), 세로(height) 지정 가능 - inline : 화면을 수평 분할(디자인을 글자, 문자열 취급) + 가로(width), 세로(height) 지정 불가능 - inline-blo..

일반적인 위치나 구조를 나타내는 선택자 형제 관계 있는 태그들 중에서 특정 태그만 선택하는 선택자 선택하는 기준을 통해 위치를 구분함 A : 태그 선택 기준 div 태그대신 A 변수명으로 선택 A : first-child 형제들 중에서 가장 첫번째를 선택 첫번째가 A 가 맞다면 선택 B : last-child 형제들 중에서 가장 마지막을 선택 마지막이 B 가 맞다면 선택 일:nth-child(1..

레아이웃(layout) 사용 목적을 기반으로 시각적 효과를 구성하는 행위 사전적 의미 : 배치, 정리 기술적 의미 : 구성 요소를 제한된 공간에 효울적으로 배치하는 것 display : 화면에 표시나 형식에 대한 배치 지정 태그가 화면에 어떻게 보여질지 형식을 지정하는 속성 - block : 화면을 수직 분할(한 줄 다 차지) + 가로(width), 세로(height) 지정 가능 - inline : 화면을 수평 분할(디자인을 글자, 문자열 취급) + 가로(width), 세로(height) 지정 불가능 - inline-blo..

CSS 선택자 우선순위 기본적으로 CSS 속성은 style 태그 또는 CSS 파일에 작성된 순서(위 -> 아래) 로 해석이 진행되지만 같은 요소에 따라 여러 CSS 속성이 설정되는 경우 우선 순위 적용 1) 동일한 우선 순위로 CSS 속성이 설정된 경우 -> 제일 마지막에 작성된 CSS 속성이 반영 2) 여러 선택자를 이용해서 같은 요소를 선택하더라도 지정되는 CSS 속성이 다르면 모두 반영 1 순위 : CSS 속성 속성값 !important; background-color: green !important; 2 순위 : 태그 옆에 작성된 sty..

CSS(Cascading Style Sheets) 마크업 언어(html)가 실제로 화면에 표시되는 방법을 기술하는 언어 (모양, 색상, 크기, 배경이미지, 움직임, ...) 하나의 태그에 여러 CSS 코드를 겹쳐서 원하는 스타일을 만들어냄 W3C 에서 CSS 를 표준 스타일로 지정 Style 태그는 head 와 body 안에 작성해도 되고 다른 곳에 존재해도 됨 하지만 head 안에 작성해주는 것이 암묵적인 룰 추후 수정하거나 추가 작업을 진행할 때에 사용 CSS 선택자(CSS selector) ..