Front-end/css

div 태그를 가로/세로로 정렬하는 방법 (display: flex)

div 태그가 중첩되어 있을 때, 각각의 요소를 가로/세로 정렬하려고 한다. 2번 상자들을 가로로 정렬하고, 그 안에 들어있는 3, 4, 5 번 상자를 세로로 정렬하고 싶다고 가정한다. 구현방법 2번 상자를 모두 감싸는 div(1번 상자)를 하나 만든다. 1.에서 만든 모든 상자를 감싸는 최상위 div(1번 상자)에 display: flex; 를 준다. (*display: flex; -> 자식요소인 block 태그 div를 inline으로 변경시켜 가로로 정렬할 수 있게 해준다.) -> 2번 상자가 가로로 정렬된다. 3번 상자 하나를 div로 묶고, 4,5번 상자를 하나의 div로 묶는다. 2번 상자에 display: flex;와 flex-direction: column;을 주어 세로로 정렬할 수 있게 ..

[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에 설정해 줄 수 있다. /..