CSS8 3-7) 디버깅-HTML-CSS 크롬 개발자도구의 Element panel을 잘 익혀두는 것이 중요합니다. 개발자도구를 통해서 쉽게 할 수 있는 일들을 정리하면 다음과 같습니다. CSS Style을 inline 방식으로 빠르게 테스트할 수 있습니다. 현재 엘리먼트의 값을 임시로 바꿀 수 있습니다. 최종 결정된 CSS 값을 확인할 수 있습니다. 출처 Boostcourse - 3-7) 디버깅-HTML-CSS 웹 프로그래밍(풀스택) 부스트코스 무료 강의 www.boostcourse.org 2020. 12. 30. 3-6) float 기반 샘플 화면 레이아웃 구성 기본배치를 한 이후에 필요한 부분을 float를 사용해서 좌/우로 배치하는 것이 일반적입니다. 비율조정은 %를 사용해서 배치할 수도 있습니다. 실습코드 html 부스트코스는 정말 유익합니다. menu home name 반가워요! :-) crong jk honux pobi oh~ right 코드스쿼드(주) css li { list-style:none; } header { background-color : #eee; } #wrap { overflow:auto; margin:20px 0px; } .left, .right, .realright { float:left; height: 200px; } .left { width:17%; margin-right:3%; background-color : #47c; } ... 2020. 12. 29. 3-5) Element가 배치되는 방법(CSS layout)-1,2 css파일의 올바른 주석은 무엇일까요? 1과 같은 해석되지 않는 값을 사용할 수도 있지만, 다른 프로그래밍 언어처럼 css도 주석이 있습니다 /* */ 를 사용해서 주석처리를 할 수 있답니다. 엘리먼트가 배치되는 방식 엘리먼트를 화면에 배치하는 것을 layout 작업이라고도 하고, Rendering 과정이라고도 합니다. 편의상 우리는 배치라고 할 겁니다. 기본 엘리먼트는 위에서 아래로 배치되는 것이 기본입니다. 하지만 웹사이트의 배치는 다양하게 표현 가능해야 하므로, 이를 다양한 방식으로 배치할 수 있도록 다양한 속성을 활용합니다. 중요하게 이해해야 할 속성은 다음과 같습니다. display(block, inline, inline-block) position(static, absolute, relativ.. 2020. 12. 27. 3-4) CSS 기본 Style 변경하기 CSS style 적용은 글자색, 배경색 등이 가장 자주 사용되는 것들입니다. 이런 속성은 위치 값과 크기를 지정하는 것과 달리, 색상 위주로 값을 부여합니다. 색상 관련 값은 다양한 색을 일관된 방법으로 표현하기 위해 주로 16진수 표기법을 사용합니다. font 색상 변경 color : red; color : rgba(255, 0, 0, 0.5); color : #ff0000; //16진수 표기법으로 가장 많이 사용되는 방법이죠. font 사이즈 변경 font-size : 16px; font-size : 1em; udemy css 유료강의 강의 노트 참조 (링크) 배경색 background-color : #ff0; background-image, position, repeat 등의 속성이 있습니다. b.. 2020. 12. 27. 3-3) CSS Selector h1, span, div { color : red } h1, span, div#id { color : red } h1.span, div.classname { color : red } CSS selector HTML의 요소를 tag, id, html 태그 속성 등을 통해 쉽게 찾아주는 방법입니다. element에 style 지정을 위한 3가지 기본 선택자 tag로 지정하기 id로 지정하기 HELLO World! class로 지정하기 HELLO World! CSS Selector의 다양한 활용 id, class 요소 선택자와 함께 활용 #myid { color : red } div.myclassname { color : red } 그룹 선택 (여러 개 셀렉터에 같은 style을 적용해야 한다면) h1, sp.. 2020. 12. 27. 3-2) 상속과 우선순위 결정-2 만약 css.css에서 div color를 blue로 주었다면, 뒤에 선언된 external방식의 css내용이 반영됩니다. 따라서 blue색깔로 나오겠죠. 즉 internal과 external은 같은 우선순위로 결정된다고 아셔야 합니다. CSS는 여러가지 스타일정보를 기반으로 최종적으로 '경쟁'에 의해서 적절한 스타일이 반영된다는 점을 잘 기억해야 합니다. text.... #a{ color : red; } .b{ color : blue; } div{ color : green; } 위 코드에서 id, class, 엘리먼트 순으로 우선순위를 가집니다. id는 클래스보다 우선되고 클래스는 엘리먼트보다 우선됩니다. 위 코드에서는 id인 a의 색상이 적용되게 됩니다. CSS의 이런 성질을 캐스캐이딩이라고 합니다... 2020. 12. 27. 3-2) 상속과 우선순위 결정-1 상위에서 적용한 스타일은 하위에도 반영됩니다. 이로 인해 여러 단계로 중첩된 엘리먼트마다 매번 같은 색상과 글자 크기를 부여하지 않아도 됩니다. 하지만 모든 CSS 속성이 이런 특징을 갖게 되면, 몇 가지 문제가 생깁니다. 예를 들어 width 속성이 상속되면 하위 엘리먼트가 모든 같은 크기의 넓잇값을 가질 수 있습니다. 이런 것은 원하는 것이 아니죠. 그래서 box-model이라고 불리는 속성들(width, height, margin, padding, border)과 같이 크기와 배치 관련된 속성들은 하위엘리먼트로 상속이 되지 않습니다. 이렇게 CSS는 꽤 똑똑한 방식으로 동작합니다. 아직 혼란스러운 부분이 있다면, 여러분들이 중첩된 엘리먼트를 만들고, CSS 속성을 부여하면서 이 특징을 잘 이해해보면.. 2020. 12. 27. 3-1) CSS 선언방법 CSS의 구성 span { color : red; } span : selector(선택자) color : property red : value style을 HTML페이지에 적용하는 3가지 방법 1. inline HTML태그 안에다가 적용합니다. 다른 CSS파일에 적용한 것 보다 가장 먼저 적용합니다. 2. internal style 태그로 지정합니다. 구조와 스타일이 섞이게 되므로 유지보수가 어렵습니다. 별도의 CSS파일을 관리하지 않아도 되며 서버에 CSS파일을 부르기 위해 별도의 브라우저가 요청을 보낼 필요가 없습니다. ... 3. external 외부파일(.css)로 지정하는 방식입니다. CSS 코드가 아주 짧지 않다면 가급적 이 방법으로 구현하는 것이 가장 좋습니다. 현업에서는 여러개의 CSS 파.. 2020. 12. 27. 이전 1 다음 반응형
