전체 글292 6. 레이아웃 추가(심화)내용 1. box-sizing : box model 을 사용할 때 지정하는 속성 중 하나로, 기존 box model 사용 시의 불편함을 없애려고 만들었다. 기존의 문제점 holy grail layout 등을 만들면서 box model을 사용하여 padding, border, width 등을 지정할 때, html 태그의 width가 여러 float 속성을 적용한 요소들의 width의 합과 맞아떨어져야 보기좋은 레이아웃이 만들어지는데, 이때 각 요소들의 border과 margin 값을 고려하여(추가로 더해서) width 값을 예상해야 하는 불편함이 있었다. ex) element1의 width는 300, border는 10, element2의 width는 400, border는 15, margin은 20일 경우 -.. 2021. 4. 5. 5. brackets ~ 레이아웃 기초 내용 1. 프로그램 : Editor의 일종으로, Atom보다 편리한 기능들이 들어있는 HTML, CSS, Javascript 등에 사용할 수 있는 에디터이다. => 앞으로는 이 에디터를 쓸 것 같다. 여기에 Emmet 추가 프로그램을 설치하면 대략 5가지 이상의 기능을 편리하게 쓸 수 있다. 더보기 1) 태그 자동완성 by [Tab] 키 ex) html 입력하고 Tab 누르면: 자동 완성 2) 여러 개의 태그 자동완성 by (태그 이름)*(반복할 수) + [Tab] 키 ex) li*3 입력하고 Tab 누르면: 자동 완성 3) 여러 개의 태그 포함관계 완성 by (상위 태그)>(하위 태그) ex) html > head > style 입력하고 Tab 누르면: 자동 완성 + 2번과 3번 합치기도 가능 4) 다음 태.. 2021. 4. 2. 4. 타이포그래피-font ~ 조화 #1. 타이포그래피-font : font-family 등을 사용해서 글꼴 조정 가능 1. font-family : 글꼴 적용 1) 글씨체로 글꼴 적용 => font-family : (글꼴이름) 2) 해당 글꼴이 적용 안 될 때는 여러 개로 순차적 적용 가능 => font-family : (글꼴1) , (글꼴2) , (글꼴3) + 두 단어 이상일 경우에는 ""로 묶기 ex) font-family : Nanumgothic , "Times New Roman" 3) 포괄적 글꼴 적용 가능 : serif , sans-serif , cursive , fantasy , monospace 적용 가능. 이들은 특정 글꼴 이름이 아니라, 앞에서 언급한 글꼴이 컴퓨터에 없을 경우 적용될 수 있는, 어느 컴퓨터에나 있는 포괄.. 2021. 4. 1. 3. 선택자 fin ~ 타이포그래피 #1. 가상 클래스 선택자(pseudo class selector) : class 선택자처럼 여러 대상에 속성을 지정할 수 있지만, class 선택자는 아닌 것을 의미 => id나 class 또는 태그 지정:pseudo class selector {디자인 속성 지정} ex) #fancy:hover{background-color:blue} : id가 fancy인 요소에 마우스가 올려져 있을 때(=hover)->가상클래스선택자 해당 서식을 적용한다는 의미 가상 클래스 선택자에도 여러 종류가 있는데, 그 중 간단하게 몇 가지만 알아보았다. 1) active : 해당 요소를 클릭하고 있을 때를 의미. 2) visited : 주로 태그와 함께 사용. 이미 클릭한 링크에 적용됨 3) link : visited 와 .. 2021. 3. 30. 2. 선택자 #1. 선택자 공부 팁 선택자의 종류도 많고, 포함관계 등을 따지면 더 복잡하다. #1-1. 선택자 공부/연습할 수 있는 사이트 : https://flukeout.github.io CSS Diner A fun game to help you learn and practice CSS selectors. flukeout.github.io : 테이블 안의 음식 중 특정한 것을 고르는 게임? 퀘스트?인데, 그 과정에서 CSS 선택자의 종류와 여러 관계를 학습할 수 있다. 1. Sibling Selector 1) Adjacent Sibling Selector A + B : A와 B가 동일한 level이고(과 처럼) A 태그 바로 다음에 B 태그가 언급될 때, B는 A의 adjacent sibling selector.. 2021. 3. 29. CSS Tutorial: 0. CSS 소개 HTML과 CSS의 관계에 대해 배우던 중 이런 글을 보았다: Inline - by using the style attribute inside HTML elements Internal - by using a h2 는 Selector(선택자)이고 디자인 설정을 받을 개체이다. { } 안의 부분은 Declaration(선언)이고 Selector에 적용될 디자인 설정이다. color , text-decoration 부분은 property(속성)이며 Declaration 안의 구체적인 요소들을 의미한다. skyblue , underline 부분은 value(속성값)이며 property에 할당되는 값이다. : 은 property와 value를 구분한다. ; 은 각각의 declaration을 구분.. 2021. 3. 24. 이전 1 ··· 45 46 47 48 49 다음
