프론트엔드 (18) 썸네일형 리스트형 [WEB] CSS 요소 배치(2) float 속성기존의 배치에서 예외적으로 떠있게 한다. float 속성이 없다면 blue, green, red div가 각각 위에서 아래로 순서대로 보여야 한다.하지만 float 속성에 의해 green div가 배치와 관계없이 화면에 띄워지게 되므로 red div가 blue div 바로 아래에 배치된다. 123cs 1234567891011.blue { background-color: blue;}.green { float: left; background-color: green; margin-left: 30px;}.red { background-color: red;}cs Box-model하나의 block 요소는 box형태이다. block 요소의 경우 box의 크기와 간격에 관한 속성으로 배치를 추가 결정한다.. [WEB] CSS 요소 배치(1) display 속성12block1block2cs∎ block위에서 아래로 요소들이 쌓인다. ∎ inline우측으로 요소들이 쌓인다. width, height 속성을 지정해도 반영되지 않는다. ∎ inline-blockinline 요소처럼 동작하지만, 해당 요소 내부에서는 block요소처럼 동작한다.inline요소와 비슷하지만, width, height를 설정할 수 있다. position 속성position 속성을 이용하여 특별한 배치를 할 수 있으며, position 속성의 기본값은 static이다. ∎ static순서대로 배치된다. ∎ absolute기준점에 따라서 특별한 위치에 배치되며, top/left/right/bottom으로 설정한다.상위 요소 중 static이 아닌 position을 기준점으로.. [WEB] CSS 기본 Style Font 색상변경123color : red;color : rgba(255, 0, 0, 0.5);color : #ff0000;cs Font 사이즈 변경12font-size : 16px;font-size : 1em;cs 배경색12345background-color : #ff0;background-image : ;background-position : ;background-repeat : ;background : #0000ff url(“.../gif”) no-repeat center top; Colored by Color Scriptercs 글씨체/글꼴12font-family : "Gulim";font-family : monospace;cs 웹폰트브라우저에서 기본으로 지원하지 않는 폰트를 웹으로부터 다운로드받.. [WEB] CSS Selector CSS SelectorHTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법 ∎ tag로 지정하기12345 span { color : red; }cs ∎ id로 지정하기123456789 #spanId { color : red; } Hello World! Colored by Color Scriptercs ∎ class로 지정하기123456789 #spanClass { color : red; } Hello World! Colored by Color Scriptercs CSS Selector의 다양한 활용∎ id, class 속성을 요소 선택자와 함께 활용123456span#mySpanId { color : red;}div.myDivClass { color : green;}cs ∎.. [WEB] CSS 선택자 우선순위 CSS 상속상위 요소에 설정된 스타일 속성은 하위 요소에도 반영된다.이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 된다.※ box-model이라고 불리는 속성들 즉, 크기와 배치 관련된 속성들은 하위 엘리먼트로 상속되지 않는다.ex) width, height, margin, padding, border 선택자 우선순위(CSS Specificity, Cascading Order) ∎ 선언 방식에 따른 차이123456span { color : red;}span { color : blue;}cs같은 선택자라면 나중에 선언한 것이 적용된다. => blue 123456body > span { color : red;}span { color : blue;}cs선택자의 표현이.. [WEB] CSS 선언방법 및 적용방법 CSS 선언방법123span { color: red;}csspan : selector(선택자)color : propertyred : value CSS를 HTML에 적용하는 방법∎ inline HTML 태그 안에다가 넣는 방법으로, 다른 CSS 파일에 적용한 것보다 가장 먼저 적용된다.1cs ∎ internal style 태그로 지정하는 방법으로 구조와 스타일이 섞이게 되므로 유지보수가 어렵다. 별도의 CSS파일을 관리하지 않아도 되며, 서버에 CSS파일을 부르기 위해 브라우저가 요청을 보낼 필요가 없다.1234567891011121314 p { font-size: 2em; border: 1px solid gray; color: red; } Hello CSS cs ∎ external 외부파일(.css)로.. [WEB] HTML 기초(id, class, data 속성) id 속성고유한 속성으로, 한 HTML문서에 하나만 사용가능하다. (여러 개를 사용해도 에러가 나지는 않는다.)고유한 ID값이 있으면 하나하나에 특별한 제어를 할 수 있으며 검색에도 용이하다. class 속성하나의 HTML 문서 안에 중복해서 사용가능하다.하나의 태그에 여러 개의 다른 class를 공백을 기준으로 나열할 수 있다.홈페이지 전체적인 스타일을 일관성있게 지정하기 위해서는 class의 사용이 필수적이다. data 속성tag에 추가적인 데이터 정보를 표현하기 위해 사용한다. 참고자료https://www.edwith.org/ [WEB] 프론트엔드, 백엔드 프론트엔드(Front-End)사용자에게 웹을 통해 다양한 콘텐츠(문서, 동영상, 사진 등)를 제공하며, 사용자의 요청에 반응해서 동작한다.클라이언트의 입장에서 개발이 진행된다. (Client Side)HTML - 구조CSS - 디자인JavaScript - 동작 - HTML12345678910 hello hello HTML5! cs - CSS123456789101112#spotNonExist { width: fit-content; margin: 0 auto; font-size: 20px; text-align: center;}.my-content { display: inline-block; width: 250px; margin: 20px 5px; cursor: pointer;}cs - JavaScript12.. 이전 1 2 다음
