분류 전체보기

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

[CSS] 상속과 우선순위

조상요소에 스타일을 지정하면 하위요소에도 적용된다. 상속 되는 속성들(properties) font font-size fonet-weight font-style line-height font-family color text=align text-indent text-decoration letter-spacing opacity 강제 상속 : inherit 값 사용하여 부모→자식으로 강제 상속(후손 적용X) *모든 속성이 강제 상속을 사용할 수 있는 건 아님 .class { position: inherit; /*강제 상속*/ } 우선순위 결정 같은 요소가 여러 선언의 대상이 될 경우, 어떤 선언의 CSS속성(property)을 우선 적용할지의 순위 1. 명시도 점수 큰 순서 인라인(HTML style 속성 사..

[CSS] 속성 선택자(Attribute Selectors)

클래스 이름 일일히 지어주기 귀찮을 때 유용함. attr : html 태그의 속성 attr을 포함한 요소 선택 [attr] attr=value : 속성 attr을 포함하며 속성 값이 value인 요소 선택 [attr=value] attr^=value : 속성 attr을 포함하며 속성 값이 value로 시작하는 요소 선택 [attr^=value] attr$=value : 속성 attr을 포함하며 속성 값이 value로 끝나는 요소 선택 [attr$=value]

[CSS] 가상요소 선택자(Pseudo-Elements Selectors)

가상 요소 선택자 : CSS를 통해서 TML에 가상의 요소를 생성해서 제공 콜론 2개(::) 사용 before : E 요소 내부의 앞에 내용(content)을 삽입 *content 필수로 써야함 E::before after : E 요소 내부의 뒤에 내용(content)을 삽입 *content 필수로 써야함 E::after