css
-
[CSS] Box Model , Display, Position, floatFrontEnd/CSS 2021. 2. 19. 02:45
BoxModel Box에는 content, padding, border, margin이 있다. -박스 크기는 이렇게 구해진다. 너비: width + left/padding + left/border + left/margin 높이: height + top/bottom padding + top/border + top/bottom margin -값을 따로 정하지 않으면 기본값 auto가 적용된다. (margin에 auto를 주면 브라우저 중앙에 위치하게 된다.) -값을 지정할 경우 px, % 등의 단위를 쓴다. 박스모델 관련 속성은 상속되지 않는다. -top, right, bottom, left가 모두 같다면 margin: 25px; 처럼 한번에 지정해도 된다. -box-sizing 프로퍼티는 content-b..
-
CSS - 선택자, 속성값, Reset CSSFrontEnd/CSS 2021. 2. 17. 17:11
CSS(Cascading Style Sheets)는 HTML 같은 문서를 화면에 어떻게 표현할 것인지를 정의하는 언어다. Rule Set(구문) 위와 같은 구문을 Rule Set 혹은 Rule이라고 부른다. 이런 Rule Set을 모아둔 시트를 Style Sheet라고 부른다. Selector(선택자) CSS 구문에서 스타일을 적용할 HTML element를 선택하는 부분을 Selector라 부른다. -HTML 문서 내의 모든 요소를 선택하고 싶다면 * 키워드를 사용할 수 있다. (head 태그와 html 태그도 포함된다.) -* 키워드를 이용해 상속되지 않는 box-sizing 프로퍼티를 상속시킬 수도 있다. *, *:before, *after { box-sizing: inherit; } -HTML e..
-
[CSS] 반응형 디자인(Responsive Design), Media Query생활코딩/WEBn 2020. 8. 26. 17:16
[강의 출처] opentutorials.org/course/3086/18323 반응형 디자인 - 생활코딩 반응형 디자인과 미디어 쿼리 소개 강의 소스코드 변경사항 미디어 쿼리를 이용해서 반응형 디자인 구현하기 강의 소스코드 변경사항 opentutorials.org 반응형 디자인(Responsive Design) 웹 특성상 PC, mobile, 여러 운영체제 등 다양한 환경에서 적절하게 동작해야할 필요성 대두 화면의 크기에 따라, 웹페이지의 각 요소들이 반응하여 그 화면에 최적화된 형태로 동작하는 디자인 미디어 쿼리(Media Query) 반응형 디자인을 구성하는 핵심적인 기술 태그 내에 @media(조건문) { 실행 } 형식으로 작성 스마트폰의 가로모드, 세로모드를 비롯한 다양한 크기의 화면에 대응할 수..
-
[CSS] 레이아웃: Box Model, Grid생활코딩/WEBn 2020. 8. 25. 17:31
[강의 출처] opentutorials.org/course/3086/18319 박스모델 - 생활코딩 CSS box model 소개 강의 소스코드 변경사항 박스 모델을 써먹기 강의 소스코드 변경사항 opentutorials.org Box Model tag를 감싸는 Box형 부분들(padding, border, margin, width 등)에 효과를 줌으로써 디자인함 width: 텍스트의 너비 display: 글자의 부피 지정, block(그 줄 전체), inline(텍스트만큼의 부피), none(사라짐), grid, ... Grid 가로/세로 2차원 레이아웃을 나누기 위해 사용 의 해당 태그에서 display: (inline-)grid 로 정의하여 사용 가능 div(block), span(inline) 태..
-
[CSS] Selector: class, id생활코딩/WEBn 2020. 8. 24. 20:57
[강의 출처] opentutorials.org/course/3086/18329 CSS 선택자를 스스로 알아내는 방법 - 생활코딩 강의 내용이 많고 복잡합니다. 시간을 충분히 확보하고 시작하세요. 소스코드 변경사항 opentutorials.org Cascading: 선택자(Selector) 우선순위 id > class > tag(element) class (코드 작성자가) 텍스트들을 어떤 의도에 따라서 그룹화할 때 쓰는 선택자(Selector) 다른 태그에 class="class이름" 형태로 삽입 한 태그에 여러 class 중첩이 가능하며, 띄어쓰기로 구분 여러 class가 중첩된 경우, HTML CSS JS 2. 같은 계열 Property의 Value라면 아래처럼 표현 가능, Value의 순서는 중요하지..
-
[CSS] 정의, Selector, Declaration, Property, Value생활코딩/WEBn 2020. 8. 24. 19:37
[강의 출처] opentutorials.org/course/3086 WEB2 - CSS - 생활코딩 수업소개 이 수업은 https://opentutorials.org 를 만들어가면서 CSS에 대한 지식과 경험을 동시에 채워드리기 위한 목적으로 만들어진 수업입니다. 수업대상 이 수업은 웹 페이지를 아름답게 디자인�� opentutorials.org CSS란? HTML의 후배(?)격인 디자인 최적화 언어 HTML 덕분에 웹페이지 형태의 정보 공유가 가능해진 이후, '아름다움'에 대한 추가적인 요청이 생김 처음에는 HTML의 디자인 관련 태그를 이용했으나, 점차 이에 최적화된 새로운 도구 CSS가 필요 '정보'와 '디자인'을 제공하는 코드가 섞이면서 정보로서의 가치가 희석될 뿐 아니라, 변화(전체 텍스트의 색..