전체 글252 8. 그래픽 1. 배경(background) 1) 배경의 세부 속성들(순서대로) 1. background-color : 색깔 2. background-image : 특정 이미지를 배경에 적용할 때. background-image : url("이미지 경로.확장자") 3. background-repeat : 배경 이미지의 경우, 바둑판식으로 반복될지를 결정하는 속성 1. : no-repeat : 이미지 반복 안 함 2. : repeat-x : 가로 방향으로만 반복나열 3. : repeat-y : 세로 방향으로만 반복나열 4. : repeat[기본값] : 가로 세로 반복(바둑판식) 4. background-attachment : 배경이미지가 화면에 어떻게 붙어 있을지를 결정함 1. scroll[기본값] : 화면 스크롤하면.. 2021. 4. 12. 7. 레이아웃 1. flex의 기타 속성들 정리 : 모든 내용은 Flexbox playground (codepen.io)를 참고했다. [1] 전체 element에 적용되는 속성 1) flex-wrap flex의 기본 설정 : 같은 row/column에 배정된 컨텐츠의 총 너비/높이의 합이 컨테이너 전체의 너비/높이의 합보다 크다면(높이가 지정된 경우), flex-direction 이 설정된 경우 그냥 한 row/column에 컨텐츠를 나타낸다. flex-wrap에는 3가지 값이 있다 1. flex-wrap : nowrap => 기본값. KSY HTML CSS JavaScript Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis ab rerum del.. 2021. 4. 7. 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. 이전 1 ··· 38 39 40 41 42 다음
