전체 글

[CSS] 띄움(정렬), 위치

float : 요소를 좌우방향으로 띄움(수평 정렬) 레이아웃은 기본적으로 수직적으로 쌓이는데, 수평 레이아웃으로 변경할 때 사용. 최근엔 이거보단 flex box를 많이씀 속성 값 의미 기본값 none 요소 띄움 없음 none left 왼쪽으로 띄움 right 오른쪽으로 띄움 원하는 컨텐츠를 글과 함께 수평정렬하기위해 쓰이기도 하고,(해당 컨텐츠에 속성추가하면 됨) 원하는 각 요소마다 float을 적용하면 1. left : 맨 왼쪽부터 쌓인다 (1 2 3 ) 2. right : 맨 오른쪽부터 쌓인다 ( 3 2 1) *float 해제 : float을 적용한요소 외의 주변요소에는 float이 겹치므로, 주변요소에 float을 해제해줘야함 1. 다음 형제요소에 clear: (left,right,both) 추가..

[CSS] 속성 - 글꼴, 문자

font : 글자 관련 속성들을 지정. 단축 속성 값 의미 기본값 font-sytle 글자 기울기 지정 normal font-weight 글자 두께 지정 normal font-size 글자 크기 지정 medium(16px) line-height 줄 높이(줄 간격) 지정 normal(Reset.css 적용시 약 1) font-family 글꼴 지정 운영체제(브라우저)에 따라 달라짐 사용법 * 단축 속성을 사용하려면 font-size와 font-family를 필수로 입력해야 함 font: 기울기 두께 크기 / 줄높이 글꼴; /* 크기와 줄높이는 슬래쉬로 구분! */ .box{ font: italic bold 20px / 1.5 "Arial", sans-serif; } font-sytle 의 개별속성 값 의미..

[CSS] 속성 - 박스 모델

width : 요소의 가로 너비 지정 height : 요소의 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm max-width : 요소의 최대 가로 너비 지정 max-height : 요소의 최대 세로 너비 지정 min-width : 요소의 최소 가로 너비 지정 min-height : 요소의 최소 세로 너비 지정 속성 값 의미 기본값 auto 브라우저가 너비 계산 auto 단위 px, em, cm none(max) / 0(min) margin : 요소의 외부(바깥) 여백 지정. 단축속성 margin-top 위쪽, margin-bottom 아래쪽, margin-left 왼쪽, margin-right 오른쪽 등의 개별속성이 있다. 위, 아래, 좌, 우의 모..

[CSS] 단위

px 해상도에 따른 상대단위. 고정 % 부모요소에 영향받음 예제 Container Parent Child1 Child2 body *{ border: 2px solid; } .container{ width: 600px; } .parent{ width: 50%; } .child{ width: 50%; } em 자기자신의 font-size에 영향받음(정의 되지 않았을 때는 부모요소에 상속받음) ex)10px => width=60em (10*60=600px) rem root-em. 상속을 다 건너뛰고 root(html요소) 조상의 font-size를 상속받아서 적용 em 예제 rem 예제 html{ font-size: 10px; } body{ font-size: 16px; /* rem단위에 영향안주면서 전체 폰..

[CSS] 실습 환경 setting

1. CSS Reset 기본적으로 브라우저에서 제공하는 스타일은 표준화 된 것이 아니므로 초기화해서 사용해야한다. https://www.jsdelivr.com/package/npm/reset-css jsDelivr - A free, fast, and reliable Open Source CDN for npm and GitHub A free, fast, and reliable Open Source CDN for npm and GitHub with the largest network and best performance, perfectly suited for production use. www.jsdelivr.com html 문서의 header에 다음 추가 2. Codepen 사이트 https://codep..