본문 바로가기

프로그래밍 공부/CSS3

 (25)
CSS3 - 박스 속성 속성 설명 width 너비 height 높이 margin 외부여백 padding 내부여백 박스 속성은 웹 페이지의 레이아웃을 구성할 때 사용한다. Content의 너비와 높이는 width와 height를 뜻하는 것이고, margin과 padding은 위의 그림과 같은 위치에 있다. box-sizing 속성은 위에서 배운 width와 height 속성이 차지하는 범위를 지정할 수 있다. content-box 키워드는 기본적으로 적용이 되는 키워드이고 width와 height 속성이 글자가 들어가는 컨텐츠 영역의 크기를 지정하게 된다. 이때 적용되는 공식은 아래와 같다. 박스 너비 = width 속성 + 2 * (margin 속성 + border 속성 + padding 속성) 박스 높이 = height 속성..
CSS3 - 가시 속성 가시 속성은 태그가 화면에 보이는 방식을 지정하는 속성이다. 기본 속성은 display이며 아래의 키워드를 입력해 사용한다. 키워드 설명 none 태그를 화면에 보이지 않게 한다. block 태그를 block 형식으로 지정 한다. inline 태그를 inline 형식으로 지정 한다. inline-block 태그를 inline-block 형식으로 지정 한다. 이전 태그부분에서 div 태그는 block 형식을 span 태그는 inline 형식을 가진다는 것을 기억하고 위의 예시를 보는 것이 도움이 된다. 아래는 visibility속성이며 아래의 대표적인 키워드를 입력해 사용한다. 키워드 설명 visible 태그를 보이게 한다.(기본값) hidden 태그를 보이지 않게 한다. collapse table 태그를..
CSS3 - CSS3 단위 단위 설명 % 백분율 단위 em 배수 단위 px 픽셀 단위 CSS3에서 사용하는 대표적인 단위는 %(백분율), em(배수)그리고 px(픽셀)단위가 있다. 또한 크기 단위는 복합적으로 사용 할 수 있다. 전체 폰트 크기에 절대 크기를 지정하고 각각의 태그에 상대 크기를 지정하는 방법이며 많이 사용하는 방법이다. 단위 형태 설명 #000000 HEX 코드 단위 rgb(red, green, blue) RGB 색상 단위 rgba(red, green, blue, alpha) RGBA 색상 단위 hsl(hue, saturation, lightness) HSL 색상 단위 hsla(hue, saturation, lightness, alpha) HSLA 색상 단위 RGBA와 HSLA 색상 단위의 A는 alpha 값이며 ..
CSS3 - 부정 선택자 선택자 형태 설명 :not(선택자) A:not(선택자) 선택자를 제외한 A의 모든 것을 선택 선택자에 관련된 공부를 복습 할 수 있는 사이트 : https://flukeout.github.io/
CSS3 - 링크 선택자 선택자 형태 설명 :link href 속성을 가지고 있는 a 태그를 선택 :visited 방문했던 링크를 가진 a 태그를 선택 첫 번째 a 태그는 href 속성이 적용되지 않아 링크 선택자 속성이 적용되지 않는다. 선택자 형태 설명 ::before 태그 앞에 위치하는 공간을 선택 ::after 태그 뒤에 위치하는 공간을 선택 위의 전/후 선택자에는 content 속성을 사용 할 수 있다.
CSS3 - 문자 선택자 선택자 형태 설명 ::first-letter(or :first-letter) 첫 번째 글자를 선택 ::first-line(or :first-line) 첫 번째 줄을 선택 ::first-line 선택자는 첫 번째 줄을 선택하는 선택자이고, width나 hight 값을 주지 않으면 마침표나 쉼표 기준이 아니라 웹 페이에서의 첫 번째 줄을 기준으로 style이 적용이 된다. 선택자 형태 설명 ::selection 드래그한 문자를 선택
CSS3 - 구조 선택자 구조 선택자는 일반적으로 자손 선택자와 병행해서 많이 사용한다. 일반 구조 선택자 선택자 형태 설명 :first-child 형제 관계 중에서 '첫 번째'에 위치하는 태그를 선택 :last-child 형제 관계 중에서 '마지막'에 위치하는 태그를 선택 :nth-child(수열) 형제 관계 중에서 '앞'에서 수열 번째에 태그를 선택 :nth-last-child(수열) 형제 관계 중에서 '뒤'에서 수열 번째에 태그를 선택 이 중에서 수열이 들어가는 :nth-child(수열)과 :nth-last-child(수열)을 예로 들자면 2n+1은 n값에 0부터 차례대로 넣어 1, 3, 5, 7, 9... 번째에 있는 태그를 선택합니다. 이것을 이용해 아래 예시1을 보면 이해 할 수 있다. 구조 선택자를 사용하면서 자주 ..
CSS3 - 상태 선택자 상태 선택자는 입력 양식의 상태를 선택할 때 사용하는 선택자입니다. 선택자 형태 설명 :checked 체크 상태의 input 태그를 선택 :focus 초점이 맞추어진 input 태그를 선택 :enabled 사용 가능한 input 태그를 선택 :disabled 사용 불가능한 input 태그를 선택 enabled는 input가 사용 가능한 상태를 말하고, disabled은 사용 불가능한 상태를 나타냅니다. 아래 예시1은 위의 표의 형태를 사용한 코드입니다. checkbox에 경우 체크를 할 경우 width는 100px, height가 100px만큼 크기가 커지는 것을 알 수 있습니다. 위의 예시2는 속성 선택자, 상태 선택자, 동위 선택자를 함께 사용해 만든 코드입니다. 코드를 실행하고

티스토리툴바