css

[css] 포지셔닝

position 요소의 위치를 바꿔주는 속성이며, 기본값은 static이다. relative /* css */ i { position: relative; top: 30px; } 구글(영어: Google LLC)은 구글 검색을 중심으로 스마트폰 운영체제인 안드로이드와 유튜브 사업, 클라우드 사업을 하는 미국의 기업이다. 다양한 구글 서비스들(메일, 크롬, 지도, 어스, 포토 등)과 함께 '전 세계의 모든 정보들을 체계화하여 모든 사용자가 유익하게 사용할 수 있도록 한다'라는 사명을 가지고 사업을 하고 있다. 인터넷을 사용하여 정보를 공유하는 산업의 가장 큰 기업이며 세계에서 가장 많은 데이터센터, 통신 네트워크와 함께 매일 수십억 명의 사람들에게 수백억 번의 서비스를 제공하고 있다. 2022년 7월 현재 ..

[css] <img> vs background-image

이미지를 넣는 방법은 두 가지가 있다. 태그를 사용하는 것과, background-image를 사용하는 것. 그렇다면 무엇을 써야할까? 이 두 가지는 차이점이 존재한다. 이것을 알기 위해서는 먼저 시맨틱 웹에 대해 알아야한다. 시맨틱 태그 한 눈에 봤을 때, 의미를 알 수 있는 html태그(ex h1(제목), p(문단), header(헤더)...) 구조를 쉽게 알아볼 수 있도록 도움을 준다. 시맨틱 웹 시맨틱 태그를 포함하는 검색엔진최적화(SEO)에 효과적인, 의미있는 웹을 의미한다. SEO에 효과적이기 위해서는 웹표준을 따라야한다. https://www.koreahtml5.kr/main.do 시맨틱 웹에 효율적이기 위해서는 태그를 사용하면된다! 이미지가 사용자의 컨텐츠 이해에 더 많은 도움을 준다. S..

[css] 단위

px 절대적인 값이며, 다른 요소들에 영향을 받지 않는다. /* css */ html { font-size: 20px; } .container { padding-top: 40px; background-color: lime; } Codeit rem rem은 상대적인 값이지만, html 태그의 font-size에만 영향을 받는다. 2rem은 font-size의 2배의 크기이다. /* css */ html { font-size: 20px; } .container { padding-top: 2rem; /* html의 font-size * 2 = 40px */ background-color: lime; } Codeit em 상대적인 값이며, em은 기준이 자신의 font-size이다. 2em은 자기 자신의 fon..

[css] 선택자 정리

태그 이름 /* css */ /* 모든 태그 */ h1 { color: orange; } Heading 1 Heading 2 HTML 삽입 미리보기할 수 없는 소스 클래스/아이디 /* css */ /* 'important'라는 클래스를 갖고 있는 모든 태그 */ .important { color: orange; } /* 'favorite'라는 아이디를 갖고 있는 태그 */ #favorite { color: blue; } Paragraph 1 Paragraph 2 Paragraph 3 Paragraph 4 Paragraph 5 Paragraph 6 HTML 삽입 미리보기할 수 없는 소스 자식(children) /* css */ /* 'div1' 클래스를 갖고 있는 요소의 자식 중 모든 태그 */ .div1..

[css] 배경이미지

배경에 이미지 채우는 방법 background-image: url("이미지 주소"); background-repeat 배경이미지를 반복시켜서 채울것인지, 아닌지를 선택하는 속성이다. /* 반복하지 않음 */ background-repeat: no-repeat; /* 가로 방향으로만 반복 */ background-repeat: repeat-x; /* 세로 방향으로만 반복 */ background-repeat: repeat-y; /* 가로와 세로 모두 반복 */ background-repeat: repeat; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 간의 여백으로 배분 */ background-repeat: space; /* 반복할 수 있는 만큼 반복한 뒤, 남는 공간은 이미지 확대를 통해..

[css] box-sizing

box-sizing 테두리와 패딩까지 포함한 가로, 세로 길이를 지정해주는 속성. 기본값은 content-box이다. /* css */ .div1 { box-sizing: border-box; border: 10px solid red; width: 300px; height: 200px; margin-bottom: 50px; } .div2 { box-sizing: border-box; border: 10px solid red; width: 300px; height: 200px; padding: 40px; } Hello World! Hello World! HTML 삽입 미리보기할 수 없는 소스 border-box를 추가하여 테두리와 패딩까지 포함하여 가로 300px, 세로 200px로 크기가 지정되었다. 모..

[css] box-shadow(그림자)

요소에 그림자를 주기위해서는 box-shadow를 사용하면 된다. 기본값은 none이다. /* css */ .div1 { background-color: #eeeeee; width: 400px; height: 300px; box-shadow: none; } Hello World! HTML 삽입 미리보기할 수 없는 소스 위치설정 가로 위치와 세로 위치를 설정해 줄 수 있다. /* css */ .div2 { background-color: #eeeeee; width: 400px; height: 300px; box-shadow: 40px 10px; } Hello World! HTML 삽입 미리보기할 수 없는 소스 색 설정 그림자색의 기본값은 검정색이고, 색을 따로 box-shadow에 설정해 줄 수 있다. /..

[css] border

border는 테두리를 만들어주는 속성이다. border를 사용하는 방식에는 여러가지가 있다. 1. 한줄에 적기 /* css */ .p0 { border: 2px solid #4d9fff; } .p2 { border: 2px dotted #4d9fff; } .p3 { border: 2px dashed #4d9fff; } Hello World! Hello World! Hello World! HTML 삽입 미리보기할 수 없는 소스 이 방식을 사용하면 위, 아래, 왼쪽, 오른쪽 모두 같은 테두리가 생긴다. 2. 나눠서 적기 border-style, border-color, border-width 등의 속성을 써서 테두리의 스타일을 하나씩 지정해주는 방법이다. /* css */ .p4 { border-style..