Frontend/HTML & CSS

[CSS] box-sizing 속성

box-sizing 속성은 요소의 width와 height를 계산하는 방법을 정할 수 있는 속성이다. div와 같은 박스 모델에서 width, height속성은 위의 그림에서 contents-box의 크기를 말한다. 하지만 화면에 그려질 때는 border, padding, contents-box가 크기가 다 더해져서 보여진다. 따라서 크기를 설정할 때, 원하는 크기를 얻으려면 border나 padding을 고려해야하는데, 이를 일일이 고려하면서 그리기는 힘들다. box-sizing 속성을 사용해 이 방식을 바꾸는 것이 가능하다. content-box 기본적인 방법이다. div의 width를 100px로 설정하면 content-box의 width가 100px를 가지고, border크기가 1px이고, pad..

[CSS] Normalize.css - CSS 초기화

내가 짠 코드가 다른 브라우저에서는 이상하게 보이는 경우가 있다. normalize.css는 브라우저마다 다르게 보이는 스타일들을 하나 통일시키기 위해 자주 사용되는 것 중에 하나이다. 2022년 6월 19일 기준으로 8.0.1버전 CSS /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. 줄 높이 수정 모든 브라우저에서. * 2. iOS에서 방향 변경 후 글꼴 크기 조정을 방지합니다. */ html { line-height: 1.15; /* 1..

[TIL] 레이아웃 만들기

보호되어 있는 글입니다.

[TIL] float 또는 inline-block으로 수평정렬

위의 화면과 같이 정렬하는 방법은 2가지가 있다. 1. float로 수평 정렬하기 2. inline-block으로 수평 정렬하기 1. float로 수평 정렬 float 속성은 요소들을 화면위에 띄우는 속성이다. float 속성으로 박스 두개를 왼쪽으로 정렬할 수 있다. HTML left-box right-box next-box float 속성으로 가로 정렬할 때 float 박스들을 싸매는 하나의 큰 div 박스를 만들고 폭을 지정해주는 게 좋다. CSS .left-box { float : left; background-color: dodgerblue; width: 50%; height: 200px; } .right-box { float: left; background-color: darkviolet; w..

[TIL] div 디자인

HTML 안녕하세요 개발자입니다. CSS .box { width: 100px; background-color: cadetblue; margin: 10px; padding: 40px; border: 1px solid white; border-radius: 5px; margin-left: auto; margin-right: auto; color: white; box-shadow: 12px 12px 2px 1px rgba(0, 0, 0, 0.3); }

[TIL] margin, padding

margin : 상하좌우 여백 padding: 상하좌우 안쪽 여백 margin margin 속성을 사용하면 요소 사이의 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. margin 속성 또한 다양하게 표기 가능하다. Heading 1 4가지 방식이 존재한다. 1. 한꺼번에 지정하기 Heading 1 2. 4면이 모두 같을 때 지정하기 Heading 1 3. 위, 오른쪽&왼쪽, 아래 Heading 1 4. 위&아래 , 오른쪽&왼쪽 Heading 1 padding padding 속성을 사용하면 안쪽 여백을 설정할 수 있다. 여백의 크기도 px 단위로 설정할 수 있다. padding 속성 또한 다양하게 표기 가능하다. Heading 1 4가지 방식이 존재한다. 1. 한꺼번에 지정하기 시계..

[TIL] CSS Selector

CSS Selector 클래스와 아이디는 같아 보이지만 차이점이 존재한다. 1. 같은 클래스 이름을 여러 요소가 가질 수 있지만, 같은 아이디를 여러 요소가 공유할 수는 없다. 2. 한 요소가 여러 클래스를 가질 수 있지만, 한 요소는 하나의 아이디만 가질 수 있다. 👉 즉, 한 요소는 클래스는 여러개 가질 수 있고, 아이디는 하나만 가질 수 있다. 1. 태그 셀렉터 (Type Selector) 지정된 태그명을 가지는 요소를 선택한다. css li { } 2. class 셀렉터 (Class Selector) class 속성 값을 지정하여 일치하는 요소를 선택한다. class 속성값은 중복이 가능하다. html Hello World! '.' 으로 해당 태그의 클래스의 이름으로 선택하는 것이 가능하다. cs..

[TIL] 이미지 가운데 정렬

이미지를 가운데 정렬 display: block; margin-left: auto; margin-right: auto;

[TIL] float로 수평 정렬

float 요소를 좌우 방향으로 띄움 (수평 정렬) 속성 값 값 의미 기본값 none 요소 띄움 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 1. 단순 띄움 1) 사진 left에 위치 👉 여백에 글자를 흐르게 하고 싶을 때 👉 clear : left; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다. 2) 사진을 right에 위치 👉 여백에 글자를 흐르게 하고 싶을 때 👉 clear : right; 를 이용해서 흐르는 글자를 중간에 끊을 수도 있다. 2. 수평 정렬 각 요소에 float 속성이 적용되면 차례로 '정렬'됩니다. 1) left 정렬 👉 왼쪽에서 1부터 시작한다. 👉 clear : left; 를 이용해서 요소가 겹치는 문제를 해결할 수 있다. => 수직으로 쌓인다. 2) Rig..