html/css (display, position, fixed, 우선순위)

 
 

 

---

 
./ =>현재 폴더
/ => 프로젝트의 최상위 폴더

글자 태그 앞에 i를 붙이면 글자에 기울임 효과 적용
bold 굵게 span 얇게

#header-search > h1 =>자식 
#header-search  h1 => 자손 (자식 손자 등등 동일선상에 있지 않는 하위 태그들을 모두 포함한다)

display: block; 을 가지고 있는 경우에는 항상 경계(margin)를 가진다
이러한 경우에는 css속성 안에 display: inline-block; 을 사용한다

div 태그를 사용하면 경계가 적용되어 겹치지 않는다 (=공간을 통째로 차지한다, 너비를 100% 다  차지한다)

text에는 주로 span이라는 태그를 사용한다
 

---

display-inline && inline-block

 

inline 컨텐츠(ex:글자)부분만을 차지 (자기 콘텐츠 영역만을 차지하기 때문에 빈 공간을 마련할 수 없다 

글자만 사용할 때는 주로 inline을 사용)
inline-block 너비를 지정해주는 부분만 차지한다 (width와 height를 지정해줄 수 있다)

blind를 사용하면 display:none과는 달리 화면에서 나타나지는 않지만 스크린리더에는 읽힌다

각각의 div들을 구별해주기 위해 id사용 (고유한 것, 한 번만 사용 가능

class 원하는 곳에 어디든 넣기 가능(여러번 사용 가능, 하나의 태그에 여러 개의 클래스 동시에 적용 가능=> 한 칸씩 띄어쓰기 해서 적용
<ex: class="blind slide button">

background-image:url(이미지주소); 배경에 이미지 삽입
background-position: px px; 좌우로 얼마나 옮길지 (- 일시에는 왼쪽 위쪽 / 아무것도 없을 시에는 오른쪽 아래쪽)

text-indent: %; (글자 들여쓰기)

background-repeat:no-repeat; 
(백그라운드가 공간을 채우기 위해 반복하는 것을 멈춰줌)

a태그 사용 시 밑줄이 생길 수 있음 이를 없애려면 text-decoration none;

border padding content를 합친 사이즈를 나타내고 싶다면 box-sizing: border-box;

* ( css에서 모든 태그를 의미 )
 
서로 높낮이가 다르면 정렬이 다르게 나타난다 이를 위해 정렬 align을 사용해준다
vertical-align은 display가 inline, inline-block 이어야만 적용된다
정렬을 하고자 하는 두 속성에 모두 vertical-align을 적용하여야 정렬이 이루어진다

span은 display가 inline으로 설정되어 있으므로 가로 세로 길이를 마음대로 바꿀 수 없다
가로 세로를 지정해 주고 싶을떄는 display를 inline-block으로 바꿔준다

---

position

position relative(상대적인) 혹은 absoluute(절대적)를 사용할 시에 쌓임 순서를 잘 알고 있어야 한다

relative 부모 absolute 자식 (부모를 기준으로 위치를 잡고 자식의 위치를 옮겨준다)

다른 태그들을 건드리지 않고 한가지 태그만 위치를 옮겨주고 싶을 때는 position-relative를 사용하고
top, left, bottom, righte 들을 이용하여 위치를 수정하여 준다

모든 태그들은 기본적으로 position이 static 으로 설정되어 있다
(정적인 기본적인 위에서 아래로 왼쪽에서 오른쪽으로의 세팅)

position이 absolute인 경우 fixed, relative, absolute 등의 가장 가까운 조상의 내부 여백 영역이다

position의 값이 absolute인 경우 부모 영역의 가장 가까운 position값을 찾는다 (컨테이닝 블록 영역 찾기)
top, bottom, left, right의 값을 설정하지 않아도 absolute라면 기존 배치 흐름에서 벗어난다

absolute이라면 컨테이닝 블록을 찾아 그 영역을 기반으로 위치를 지정해준다

position-relative (자신의 위치를 기반으로 위치 수정)
position-absolute (컨테이닝 블록의 위치를 기반으로 위치 수정)
 

---

fixed

컨테이닝컨테이닝 블록에 대해 자세히 알고 싶으면 mozila사이트에 접속하여 검색창에 컨테이닝 블록 검색
https://developer.mozilla.org/ko/docs/Web/CSS/Containing_block

컨테이닝 블록의 모든 것 - CSS: Cascading Style Sheets | MDN

 
position-fixed (화면을 기반으로 스크롤을 내려도 계속 따라오는 것)
fixed도 absolute와 동일하게 자신의 컨테이닝 블록을 찾아야 함 
(주로 화면{body}이나 페이지 영역이 컨테이닝 블록)

태그의 속성 중 display가 line이라면  블록 컨테이너로 인식하지 않는다

css 처음 시작 할 때 html과 body의 속성에 margin padding을 0으로 설정해 주는 것이 좋다

버튼은 세로 가운데 정렬을 하고 있으므로 세로 가운데 정렬이 적용이 안된다

transform 태그를 변형시키는 속성

---

 

우선순위

 

태그가 여러번 사용 시 class로 변경해주는 게 좋음

ul태그를 사용했을 때 앞에 점이 생기는 것을 없애주려면 list-style:none;

display:inline을 사용하면 밑으로 정렬되어있던 항목들이 옆으로 정렬된다

자식 선택 예시 (nav li:first-child{} nav li에서의 첫 번째 자식    

nav li:first-child span:first-child{} nav li의 첫 번째 자식에서의 span에 있는 자식 중 첫 번째 자식)

첫 번째 자식이 특별하기 때문에 첫 번째 자식만 first-child를 사용하여 주고
두 번째 자식부터는 nth-child(숫자)를 적어주면 된다
마지막 자식은 last-child를 사용하여 준다

되도록이면 실무에서 nth-child를 사용하지 않는 것이 좋다 (수정이나 유지보수가 어려움)

class를 부여하여 하나씩 속성을 지정해 주는 것도 나쁘지 않은 방법
 
같은 속성이 3개 이상 겹치는 경우에 따로 속성을 분리해주는 것이 좋다

기본적으로 뒤에 나오는 css의 우선순위가 더 높다
우선순위가 같다면 개수가 더 많은 css의 우선순위가 더 높다

!important > inline style attribute >id >  다른 attribute (예를 들자면 class) > tag element 순으로 우선순위가 높다
id > class > tag 순으로 우선 순위가 높음

우선순위가 낮더라도 요소 뒤쪽에 !important를 붙여주면 우선순위가 가장 높아진다.
(!important를 사용하면 기존의 우선순위는 다 무시하고 !mportant를 붙인 요소의 우선순위가 가장 높아지게 된다)

*단 !improtant를 너무 남발하게 되면 적용이 안 되는 경우가 종종 발생한다

따라서 최후의 수단으로 사용하는 것이 좋음
태그를 여러번 사용하게 되면 우선순위가 더 높아진다
ex) nav li span:first-child < nav li span:first-child:first-child:first-child:first-child
 
 

---

https://youtube.com/playlist?list=PLcqDmjxt30Rsb8Zpgbemt-NaCOjr2WIUj

HTML/CSS 무료 강좌(네이버 메인)

해당 기록은 제로초님의 강좌를 진행해보며 헷갈리는 부분에 대해 추후에 살펴보고자 정리하게 되었습니다



https://github.com/mynameisseohyeon/ZeroCho-html-css

GitHub - mynameisseohyeon/ZeroCho-html-css