HTML

[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..

[html] blockquote(인용블록), &nbsp;(문장사이 스페이스 추가)

blockquote 블록 안의 텍스트가 인용문인 것을 나타내는 블록이다. JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이 서버 사이드 네트워크 프로그래밍에도 사용되고 있다. HTML 삽입 미리보기할 수 없는 소스 JavaScript는 스페이스를 10개 추가하여도 하나의 스페이스밖에 적용되지 않는다. 이럴 때는 스페이스를 의미하는 을 추가하면 스페이스가 생긴다. JavaScript는 객체 기반의 스크립트 프로그래밍 언어이다. 이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도 접근할 수 있는 기능..

[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] 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..