오늘은 어제보다 나아지길
[CSS] 태그 정리 본문
display
요소를 어떻게 보여줄지 결정
- none : 보이지 않음
-
block : div, p, h, li 태그등 해당, 가로 길이가 기본적으로 100%이며, block인 태그를 이어서 사용하면 줄바꿈됨 ( width, height 속성을 지정할 수 있으며, 레이아웃 배치시 사용)
-
inline : span, b, a, i 태그등 해당, block 과 달리 줄바꿈이 되지 않고, width, height를 지정할 수 없다.
-
inline-block : block 과 inline의 중간형태, 줄바꿈이 되지는 않지만 크기를 지정할 수 있다.
- flex : 유동적인 레이아웃을 손쉽게 만들수 잇는 속성, 블럭인 요소들은 인라인 요소들로 바꿔줄수 있다
ex) 1 -> 1 2 3
2
3
float
원래 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할 것인가에 대한 속성
-
inherit : 부모 요소에서 상속
-
left : 왼쪽에 부유하는 블록박스를 생성. 페이지 내용은 박스 오른쪽에 위치하며 위에서 아래로 흐름
-
right : 오른쪽에 부유하는 블록박스를 생성. 페이지 내용은 박스 왼쪽에 위치하며 위에서 아래로 흐름, 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐. none 이 아니라면 display 속성은 무시된다.
-
none : 요소를 부유시키지 않음
left , right 를 통해 부유속성을 지정시 display 는 무시 ( none은 제외 )
또한, 이후 요소에 clear 속성이 있으면 페이지 흐름이 달라짐
요새는 레이아웃용으로 많이 사용됨
clear
float 속성을 통해 태그를 부유시킨 이후 문서의 흐름을 제거하기 위해 쓰임
-
left : 좌측 부유 제거
-
right : 우측 부유 제거
-
both : 양쪽 부유 제거
가상선택자( :after )를 이용하여 클래스에 적용후 사용
.clearfix:after { content: " "; display: block; clear: both }position
태그를 어떻게 위치시킬지 정의
-
static : 기본값, 다른 태그와의 관계에 의해 자동으로 배치되며 위치를 임의로 설정해줄수 없다
-
absolute : 절대 좌표와 함께 위치를 지정해줄수 있다. (전체 문서 기준)
-
relative : 원래 있던 위치를 기준으로 좌표를 지정
-
fixed : 스크롤과 상관없이 항상 문서의 최좌측상단을 기준으로 좌표를 고정
-
inherit : 부모 태그의 속성값을 상속
좌표를 지정해주기 위해선 left , right , top , bottom 속성과 함께 사용
absolute , fixed 설정 시 가로 크기가 100% 인 block 요소 사라짐
다중 조건 선택자
.asset_address_input_wrap, .add_author_input { ... } 동일한 클래스, a 이면서 b 이다 라고 생각 (AND 연산)
.form_wrap.delegate_form_wrap { ... } 별개의 클래스들 지정 (OR 연산)
z-index
요소의 스택순서를 지정
-
position 속성을 이용하면 요소를 겹치게 놓을수 있는데, 이때 요소들의 수직 위치를 z-index 속성으로 정함
-
값은 정수이며 숫자가 클수록 위로 올라오고 작을수록 아래로 내려간다
unset
속성을 부모로부터 상속받은 경우 상속값으로 아니면 초기값으로 재설정(reset)합니다.
가상 클래스 선택자
-
:link - 방문한적 없는 링크
-
:visited - 방문한적 있는 링크
-
:hover - 마우스를 롤오버 했을 때
-
:active - 마우스를 클릭했을 때
-
:focus - 포커스 되었을때 (ex. Input 태그)
-
:first - 첫번째 요소
-
:last - 마지막 요소
-
:first-child - 첫번째 자식
-
:last_child - 마지막 자식
-
:nth-child(2n+1) - 홀수 번째 자식
가상요소
-
:before , :after 해당태그의 앞 뒤로 놓여짐
-
content :" " 가상선택자에 필수로 들어가는 요소
( 폼태그 (form, input)와 이미지 태그는 가상 선택자가 적용되지 않는다 )
word-break
줄바꿈을 단어 기준으로 할 지 글자 기준으로 할 지 정하는 속성
-
normal : CJK 문자는 글자 기준으로, CJK 이외의 문자는 단어 기준으로 줄바꿈
-
break-all : 글자기준으로 줄바꿈
-
keep-all : 단어 기준으로 줄바꿈
-
initial : 기본값으로 설정
-
inherit : 부모 요소의 속성값을 상속
transform
2D 또는 3D 변형을 요소에 적용합니다. 이 속성을 사용하면 요소를 회전, 크기 조절, 이동, 기울이기 등의 작업을 할 수 있습니다.
transform: translate(-50%);justify-content
컨탠츠의 좌우 관계 정렬 상태를 정의, display:flex; 일때만 적용 , align-content 속성은 콘텐츠의 상하 관계 정렬 상태 정의
-
flex-start : 요소의 정렬 상태를 왼쪽으로 설정
-
flex-end : 요소의 좌우 정렬 상태를 오른쪽 끝점으로 설정
-
center : 요소의 좌우 정렬 상태를 가운데로 설정
-
space-between : 요소와 요소사이의 간격을 왼쪽과 오른쪽을 기준으로 설정
-
space-around : 요소와 요소사이의 간격을 가운데로 기준으로 설정
-
inherit : 상위요소한테 값을 상속
border
테두리의 스타일을 설정 너비, 스타일, 색상 순서대로 지정
-
border-style : (solid, dotted, dashed…)
-
border-radius - 시계 방향 순으로 요소의 테두리를 둥글게 만들어준다.
opacity
요소의 투명도를 정할수 있는 속성
max, min
어떤 요소의 최대, 최소 너비와 높이를 지정 요소의 너비값을 max, min 값보다 커지는것을 방지
- min-width:800px -> 800보다 클때 만족 ( 이상 )
- max-width:800px -> 800보다 작을때 만족 ( 이하 )
overflow
요소의 내용이 지정한 영역에 맞지 않을떄, 내용을 클립, 스크롤 생성 추가를 지정
-
visible : 기본값, 내용 그대로 다 나옴
-
hidden : 오버플로가 짤리고 내용이 안나옴
-
scroll : 오버플로가 짤리고 스크롤바가 추가
-
auto : scroll 과 비슷하지만 필요할때만 스크롤 추가
-
overflow-x , overflow-y : 수평 또는 수직에 플로우를 변경할지 여부를 지정
margin vs padding
( 바깥쪽 여백, 안쪽 여백 )
-
0 으로 지정 시 위 아래 여백을 주지 않겟다는 의미
-
auto 가로 중앙에 배치한다는 뜻 , 좌우 여백은 균등하게 분배
-
margin: 0 auto; --> 위아래 여백 없이 가로 중앙에 배치
background
-
background-image : url(“이미지경로”) - 배경 이미지 설정, 컨테이너의 맞춰 늘어나거나 줄어들지 않고 그대로 표시, 이미지 보다 컨테이너가 크면 반복됨
-
background-repeat : no-repeat. - 이미지 반복 제거
적용 우선순위
-
1. 속성 값 뒤에 !important 를 붙인 속성
-
2. HTML에서 style을 직접 지정한 속성
-
3. #id로 지정한 속성
-
4. .클래스, :추상클래스 로 지정한 속성
-
5. 태그이름으로 지정한 속성
-
6. 상위 객체에 의해 상속된 속성
부모 자식 선택자
- ul li : 태그 이름 사이에 공백을 넣은 선택자는 부모 태그 하위에 있는 태그에 스타일을 적용
- ul > li : 두 태그 사이에 다른 태그가 없는, 순수 부모-자식 태그간의 관계만 적용됩니다.
scss 문법 정리 사이트
https://soooprmx.com/archives/7948
css 문법 정리 사이트