Coding/CSS13 CSS - 위치(float, column) 그림과 글자 조화 - 그림과 글자 위치를 조화롭게 배치 할 수 있다. *float:left;는 그림을 왼쪽에 두고, 오른쪽에 배치 *적용할 element 위치를 선정 Holy grail layout - float 기반으로 화면 layout 을 설정 할 수 있으나, 창 크기에 따라 조정이 안된다는 단점이 있다. *하단과 같이 Layout을 할 수 있으나, 단점으로 인해 최근에는 다른 방식을 많이 사용(grid(다음 글 내용에 추가 할 계획)) box-sizing:border-box; - border 효과를 넣었을 때, border의 크기는 컨텐츠의 크기로 설정 된다. - border box 크기를 border의 크기로 설정 할 수 있다. - float으로 layout을 설정 할 때, 유용한 기능. Mu.. 2020. 5. 7. CSS - Position 원하는 위치에 Text 및 img 넣기 - position속성을 이용하여 컨텐츠를 원하는 위치에 옮길 수 있다.(HTML element 어디에 위치 할지) *position : static;는 원래 기존 위치이다.(static은 정적 이라는 의미) 아무런 위치 속성을 주지 않으면 static이 적용된다. *position : relativ;는 기준점으로부터 위치를 옮길 수 있다. *position : absoulte;는 HTML 좌표(0,0)으로부터 위치를 옮길 수 있다. *position : fixed;는 화면에 고정을 시키는 것으로 스크롤을 움직여도 고정 되어 있다. *position : static은 기존 위치 이기 때문에 static을 없어도 지금과 같은 위치에 있다. *left라는 위치 값을.. 2020. 5. 7. CSS - Box model(*중요*) Box model - CSS에 border라는 외곽 테두리를 주었을 때, 다음과 같은 형태를 가진다. *border는 컨텐츠에 외곽 테두리를 주는 속성이다. - margin과 padding은 눈에 보이지 않는다. *border를 넣기 위해서 border - width, border - style, border - color를 넣어야 하지만, 쉽게 border : width, style, color를 넣어도 된다. 예시) border - width : 2px; border - style : solid; border - color : red; = border : 2px solid red; 동일한 코드 *width는 테두리 두께, solid는 테두리 스타일(solid=실선 dotted=점선), color는 테.. 2020. 5. 7. CSS - 선택자(selector) 선택자(Selector) - HTML에 있는 element를 선택자로 불러서 tag 안에 효과를 넣어서 HTML 효과를 줄 수 있다. - 선택자를 지정해주는 방식은 name, id, class가 있다. *tag를 선택자로 부를땐, tag를 기호 없이 써주고 선언을 한다. *id를 선택자로 부를땐, #을 써주고 선언을 한다. *class를 선택자로 부를땐, .을 써주고 선언을 한다. Cascasding은 우선순위를 가지고 있다. - CSS 효과는 우선 순위를 가지고 있다. * id > class > tag *div 태그에 선택자에 대해 폰트 빨간색 효과를 주었지만, 우선 순위에 의해서 id 선택자로 준 효과와 class 선택자로 준 효과 적용 *id와 class 선택자가 둘다 있을 때, id가 우선순위.. 2020. 5. 7. 이전 1 2 3 4 다음 반응형
