$$config title: [CSS] 기초 keywords: - IT - CSS $$ # CSS 기초 ## display ### block - 넓이 최대한으로 넓어진다. - 높이 최소한으로 줄어든다. - 한줄에 혼자 사용 (세로로 나열) ### inline-block - 넓이 최소한으로 줄어든다. - 높이 최소한으로 줄어든다. - 즉, 높이, 넓이 값을 무조건 지정해 줘야 함 - 한줄에 여러 블록 가능 (가로로 나열) ## br ```html
``` - 줄바꿈 태그 - 열림태그만 사용 ## a ```html ``` ### 속성 - href - href안에 링크를 넣으면 a클릭시 해당 링크로 이동 - 무조건 쌍따옴표("") - target - 링크 이동시 페이지를 어떻게 열 것인가 - 무조건 쌍따옴표("") - 주로 target="_blank"을 많이 사용 -> 새창으로 열기 - _blank - _self - _top - _parent ## 후손선택자, 자식선택자 ```html

네이버

``` - 네이버 선택할 때 - div > a - 다음 선택할 때 - section > a ```css a {color: pink} a {color:black} ``` - 만약 똑같이 a태그로만 같은 스타일 값을 주었다면? - 마지막으로 지정한 color:black이 적용 됨 ## text-align ```css text-align: center; text-align: right; text-align: left; ``` - 대상 엘리먼트를 정렬하는 것이 아닌, 그 엘리먼트 안에 있는 텍스트만 정렬하는 것. - 안에 있는 요소가 block 요소라면 정렬 안됨. - 만약 block 요소를 정렬하고 싶다면 - display: inline or inline-block 설정 - inline의 본질은 글자화 하는 것. 즉, inline태그만 text-align정렬이 적용 됨. - 대상 엘리먼트가 inline 요소라면? - inline요소는 너비가 최소값으로 되어있고, 그렇다면 정렬이 될 공간이 없기 때문에 정렬이 티나지 않는다.(-> text-align을 주는 큰 의미가 없음) ## hover ```css div:hover { background-color: blue; // div에 마우스가 올라가면 background-color를 blue로 변경해라 } ``` - hover : 마우스가 올려진 이라는 의미 ## 자식선택자, 인접동생선택자 - > : 자식선택자 - + : 인접동생선택자 # $nbsp; - html의 특수기호로서, 띄어쓰기를 의미 - html은 공백과 줄바꿈이 많아도 한칸의 공백으로 인식함 # text-decoration - a태그는 기본적으로 언더라인이 들어감. - 이런 속성을 없애 줄 때 text-decoration:none을 사용. ## img 엘리먼트의 object fit 스타일 속성 - img는 원래 고유의 비율을 가지고 있음 - width값만 늘릴 경우 그 비율에 맞게 높이값도 같이 늘어남 - width값과 height값을 둘 다 지정해 줄 경우 비율이 깨지고 사이즈에 맞게 늘어남 - object fit 속성 - contain : 이미지의 비율을 지키기 위해 지정해준 사이즈에 딱 맞지 않고 여백이 생길 수 있음 - cover : 비율을 지키면서 지정한 사이즈에 맞춰줌 -> 사진이 확대된 것 처럼 보일 수 있음 (짤림)