CSS 썸네일형 리스트형 CSS Units CSS는 길이를 표현하기 위한 여러 단위를 갖고 있다.CSS 속성들은 너비, 마진, 패딩, 글자 크기, 테두리 너비같은 "길이" 값들을 가진다.숫자와 단위 사이에 공백이 있어선 안된다. 값이 0이라면 단위는 생략될 수 있다.몇 속성 중 음수 길이가 허용된다.길이 단위의 두 타입이 있다 absolute, relative Absolute Lengths절대 길이 단위는 고정되어 있고 어떤 값으로 표현되던지 똑같은 크기로 표시된다.절대 길이 단위는 스크린 상에서의 사용이 추천되지 않는다. 왜냐하면 스크린 사이즈들은 매우 다르기 때문이다.단위 설명 cm 센티미터 mm 밀리미터 in 인치 (1in = 96px = 2.54cm) px * pixels (1px = 1/96th of 1in) pt point (1pt =.. CSS Website Layout 눈으로 직접 보고 이해하는 게 빠른 것 같다. https://www.w3schools.com/css/css_website_layout.asp CSS Counters CSS 카운터는 CSS에서 관리하는 "변수"로 규칙에 따라 값을 증가시킬 수 있다.카운터는 문서의 위치에 따라 컨텐츠의 모습을 조절할 수 있게 해준다.?? Automatic Numbering With Counterscounters와 작업하기 위해 다음과 같은 속성들을 쓸 수 있다.counter-reset : counter 생성 또는 초기화counter-increment : counter 값 증가content : 생성된 컨텐츠 삽입counter() or counters() : 함수 - 요소에 counter의 값 추가 counter를 쓰기 위해 먼저 counter-reset으로 생성되어져야 한다.다음 예제에서, 페이지에 counter를 생성하고, 각 요소에 counter 값을 증가하고 "Section :"를.. CSS Forms Input Fields 꾸미기width 속성을 써서 input field의 너비를 결정할 수 있다.input { width: 100%; }위 예는 모든 요소에 적용된다. 특정한 input type만 꾸미고 싶다면 속성 선택자를 쓸 수 있다.input[type=text]input[type=password]input[type=number] Padded Inputstext field 안에 padding 속성을 써서 공간을 추가한다.input이 많이 있다면 margin을 써서 서로 간의 간격을 띄울 수 있다.예시box-sizing의 값은 border-box이다. padding과 border가 요소의 전체 너비와 높이 안에 포함된다. Bordered Inputsborder size와 색을 바꾸기 위해 border.. CSS Attr Selectors 지정된 속성들로 HTML 요소들 꾸미기요소가 갖고 있는 지정된 속성, 속성 값으로 꾸밀 수 있다. CSS [attr] Selector지정된 속성으로 요소를 선택하기 위해 쓰인다.모든 a태그 중 target 속성있는 것들의 배경을 노랑으로 만든다.a[target] { background-color: yellow; } CSS [attr="value"] Selector지정된 속성과 값으로 요소를 선택한다.a 태그의 target 속성의 값이 _blank인 것 선택a[target="_blank"] { background-color: yellow; } CSS [attr~="value"] Selector지정된 단어를 포함하는 속성의 값으로 요소를 선택한다.속성이 title인 것의 값이 flower인 것을 선택한다. .. CSS Dropdowns Basic Dropdowndropdown 클래스 안에 dropdown-content 클래스가 있다. dropdown에 마우스를 갖다대면 none이었던 content의 display 값이 block으로 바뀌면서 나타난다. Dropdown Menudropdown content 안에 링크들을 넣었다. Right-aligned Dropdown Content CSS Navigation Bar 어느 웹사이트에서나 사용이 쉬운 길도우미(내비게이션)를 갖는 건 중요하다.Navigation Bar = List of Links길도우미는 기본적으로 표준 HTML을 필요로 한다.길도우미는 기본적으로 link들의 list이다, 그래서 과 요소들을 사용해야한다. 태그 안에 태그를 넣고 각 태그 사이에 태그를 넣는다. 블록요소라서 세로로 출력되고 머리기호, 밑줄이 나타난다.예시 머리기호, 마진, 패딩을 리스트로부터 없앤다.ul { list-style-type: none; margin: 0; padding: 0; }예시 list-style-type:none; 은 머리기호를 없앤다. 길도우미는 list 마커가 필요하지 않다.margin:0; padding:0;은 브라우저의 기본 설정을 없애기 위해 설정한다.위 예.. CSS Opacity / Transparency 요소의 불투명도, 투명도를 지정한다. transparent image0.0에서 1.0 사이의 값을 가진다. 값이 낮을수록 더 투명하다.예시 transparent hover effect마우스를 갖다 대면 불투명도를 바꾸기 위해 :hover 선택자와 종종 같이 쓰인다.예시 transparent box요소의 배경에 투명도를 추가하기 위해 opacity속성을 사용할 때, 이것의 모든 자식 요소들은 같은 투명도를 상속받는다. 완전히 투명한 요소 안에 있는 글자를 읽기 힘들게 만들 수 있다.예시 transparency using RGBA자식 요소들에 불투명도를 적용하기 싫다면, RGBA 색 값을 쓰면 된다. 다음 예시는 배경색에 불투명도를 설정하고 텍스트에는 안한다.예시rgba(red, green, blue, al.. 이전 1 2 3 4 5 다음