DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] absolute로 가운데 정렬하기

absolute를 사용해 브라우저 크기가 몇이든 가변적으로 가운데 정렬을 유지하는 방법 정리. @charset 'utf-8'; /* reset */ * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} #wrap { width: 100%; height: 100%; } #wrap .box1 { width: 400px; height: 400px; background: lightblue; } 기본적으로 별도의 설정을 하지 않으면 대상은 좌상단에 붙어있게 된다. 하지만 웹사이트 등에서는 레이아웃 및 요소들이 가운데 정렬되는 경우가 많다. position: absolu..

2022. 12. 14. 09:39

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] CSS 사용 방법

HTML 문서에 CSS를 적용하는 방법 세 가지를 정리해보았다. HTML 태그에 style 속성 사용 HTML 문서 내에서 style 속성을 사용해 대상에게 직접 스타일을 부여하는 방법. 스타일을 적용할 대상 태그 내에 style="속성값"을 사용하여 추가한다. 각 CSS 속성은 세미콜론(;)으로 구분한다. HTML문서 하나로 다 처리할 수 있다는 장점이 있지만, 적용하는 스타일이 많아질 수록 HTML 코드가 길고 복잡해지며 대상마다 스타일이 따로따로 지정되어 있어 관리가 어렵다. 태그로 사용 HTML 문서 상단에 style 태그를 넣어 사용한다. style 태그는 문서의 .box { width: 400px; background: #000; } 별도의 style.css파일을 만들어 HTML 문서에 링크한..

2022. 12. 11. 09:42

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 포지션(Position) / z인덱스(z-index)

레이아웃 내에서 세부 요소들의 위치를 설정하는 position과, 겹쳐있는 대상의 우위를 결정하는 z-index에 대한 정리. @charset 'utf-8'; /* reset */ * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} .wrap { width: 800px; border: 10px solid #000; margin: 50px auto; } .left { width: 400px; height: 400px; background-color: pink; float: left; } .right { width: 400px; height: 400px; bac..

2022. 12. 10. 09:52

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] Float 설정 / 해제 방법

레이아웃을 배치할 때 주로 쓰이는 Float에 대한 설정 및 해제 방법 정리. /* reset */ * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} .wrap {width: 800px; border: 10px solid #000; margin: 50px auto;} .left {width: 400px; height: 400px; background-color: pink;} .right {width: 400px; height: 400px; background-color: lightblue;} 기본적으로 블록 요소는 자동줄바꿈이 되어서 옆으로 나란히 배치할 ..

2022. 12. 9. 10:10

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 색상 표기법 (16진수, RGB-A)

색상 표기법에 대한 정리. red, blue, green… 같은 단어 표기로 세상의 모든 색을 표현할 수는 없다. 16진수 표기법과 RGB-A 표기법으로 보다 다양한 색상을 표현할 수 있다. 16진수 표기법 @charset 'utf-8'; /* reset */ * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} ul li {width: 100%; height: 50px;} .color1 {background-color: #000;} .color2 {background-color: #111;} .color3 {background-color: #222;} .co..

2022. 12. 8. 09:45

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 가상 요소 선택자 (Pseudo Selector)

가상 요소 선택자 중 보편적으로 많이 쓰이는 Before와 After에 대해 정리. 가상 요소 선택자 (Pseudo Selector) 가상선택자는 index.html 상에는 없는 태그지만, CSS로 컨텐츠를 동적으로 제어 가능하다. 대상의 앞이나 뒤에 붙여 다양한 모션이나 float의 속성 해제에 중요한 역할을 한다. 가상선택자 Before TEXT * {margin: 0; padding: 0;} ol,ul,li {list-style: none;} a {outline: 0; text-decoration: none;} img {border: 0;} .box {width:300px; height: 300px; background-color: lightblue;} .box p {font: bold 30px/1..

2022. 12. 7. 09:01

DEVELOPMENT NOTE/HTML／CSS

[HTML/CSS] 클래스(Class) 사용법 / 레이아웃 관련 CSS

문서의 레이아웃을 짜기 위한 CSS 모음 정리. 클래스(Class) 사용법 BOX1 BOX2 div.box1 { background-color: pink; } div.box2 { background-color: orange; } 여러 태그들을 분류하거나 묶어서 따로 속성을 부여하기 위해 이름을 지정하는 것. 예를 들어 CSS에서 div에 스타일을 지정하면 문서 내 모든 div에 공통 적용이 되지만, div별로 클래스를 따로 지정해주면 각각의 div에 다른 스타일을 적용할 수 있다. 예시에서는 배경색을 서로 다르게 지정했다. 방법은 다음과 같다. HTML에서 클래스를 지정할 태그의 머리쪽에 class="클래스명"을 입력한다. CSS에서 해당 태그명을 입력하고 뒤에 '.클래스명' 을 붙힌다. 클래스별로 스타..

2022. 12. 6. 09:15