나를 위한 개발일기 나를 위한 개발일기

1. 미디어 쿼리 소개 미디어쿼리는 각 미디어 매체에 따라 다른 스타일을 적용할 수 있게 만드는 것. 미디어 매체란 모니터와 같은 스크린 매체, 프린트, 스크린 리더기와 같은 것들이다. 미디어 쿼리는 동일한 웹 페이지를 다양한 환경의 사용자들에게 최적화된 경험을 제공할 수 있게 해준다. 2. 미디어 타입 & 미디어 특성 @media(at media) @media mediaqueries { /* style rules */ } 미디어 쿼리 구문은 논리적으로 평가되며 참이면 뒤에 나오는 스타일 규칙이 적용되고 거짓이면 무시된다. 미디어 타입: 많은 미디어 타입들이 있지만 실무에서 사용되고 알아야 될 타입은 all, print, screen 정도이다. 그 중에서도 screen이 거의 대부분이다. 미디어 특성: ..

1. 속성 - display 요소의 렌더링 박스 유형을 결정하는 속성이다. inline 요소의 경우 공백과 개행에 대해 하나의 여백으로 받아들인다. 따라서 inline과 inline-block의 경우 태그 사이의 공백이나 개행이 있을 경우 약 4px의 여백을 가지게 된다. display: value; diplay: none; diplay: inline; diplay: block; diplay: inline-block; diplay: list-item; diplay: flex; diplay: inline-flex; diplay: table; diplay: table-cell; ... Display 와 Box Model 의 관계 display width height margin padding border b..

1. 속성 - typography 폰트를 이해하기 위해서는 타이포그래피의 구조를 이해해야 한다. 모든 폰트는 em박스를 가지고 있고 아래 그림과 같은 구조로 이뤄져 있다. em: 폰트의 전체 높이 ex (= x-height): 해당 폰트의 영문 소문자 x의 높이를 의미한다. Baseline: 소문자 x를 기준으로 하단의 라인을 의미한다. Descender: 소문자에서 baseline 아래로 쳐지는 영역을 의미한다. 서체에 따라 descender의 길이가 다르다. Ascender: 소문자 x의 상단 라인 위로 넘어가는 영역을 의미한다. 2. 속성 - font-family /* 맨 마지막 선언은 generic-family */ font-family: Helvetica, Dotum, '돋움', Apple SD..

1. 속성 - 정의와 구문 CSS의 속성은 종류가 매우 다양하고, 지속해서 업데이트 된다. 잦은 변화로 인해 CSS 관련 서적이나 강의를 통해 모든 속성을 파악하는 데는 어려움이 있으며 다양한 변화에 대해 대응하고 학습하기 위해 www.w3schools.com, developer.mozilla.org/ko/ 등의 사이트들을 이용할 수 있다. CSS Reference를 통해 확인 가능한 사항들. 정의: 해당 속성이 어떤 변화를 일으키고 어떻게 동작하는지 파악한다. 기본 값 상속 여부 애니메이션 가능 여부 사용 가능한 CSS 버전 문법: 해당 속성값을 어떤 식으로 나열하여 사용하는지 파악할 수 있다. 속성 값 initial: 속성의 기본값으로 초기화. inherit: 부모 요소에 해당 속성의 값을 상속하겠다..

1. CSS 소개 Cascading Style Sheets의 약자. HTML을 꾸며주는 언어이며 html이 웹페이지의 정보를 표현한다면, CSS는 html을 보기 좋게 디자인 하는 역할이다. 2. CSS 문법과 적용 h1 { color: yellow; font-size: 2em; } /* h1 = 선택자 color, font-size = 속성 yellow, 2em = 값 color: yellow, font-size: 2em = 선언 { ... } : 선언부 */ 선택자(selector): 어느 요소를 꾸밀 건지 속성(property): html의 속성과 구별해서 이해하자 값(value): 속성으로 표현될 값 선언(declaration): 속성과 값의 조합 선언부(declaration block): 중괄호..

1. 콘텐츠 모델 Metadata: 콘텐츠의 style(표현), script(동작)을 설정 하거나 다른 문서와의 관계 등의 정보를 포함하는 요소. 태그 중 대부분이 태그 내에 들어가는 태그들이다. Flow: 거의 대부분의 태그들. 문서 내에 자연스러운 흐름에 의해 배치되는 태그 Sectioning: 헤딩과 푸터의 범위를 결정 하는 요소. 아웃라인이 있다. Heading: 섹션의 헤더를 정의하는 요소 Phrasing: 문서의 텍스트 혹은 텍스트를 꾸며주는 문단 내부 레벨로 마크업 하는 요소 Embedded: 이미지, 비디오, 플래시 등 외부 콘텐츠를 문서내에 표현하는 요소 Interactive: 사용자와 상호작용을 하는 요소. 대표적으로 폼 요소들 2. 시멘틱 마크업 시멘틱 마크업: 컴퓨터(브라우저)가 잘..

1. HTML 태그 소개 태그는 HTML을 이루고 있는 구성 요소로 130여 개 정도가 있다. 그러나 실제 주로 사용하는 태그는 30개 미만이다. 따라서 태그를 다 외운다고 생각하기 보단, 주요 태그를 잘 이해하고 사용빈도가 적은 태그는 필요할 경우 찾아 익히면 된다. 필요할 때 찾을 수 있는게 핵심이다. 2. 제목과 단락요소 Heading 태그 (h1 - h6): 제목을 표현할 때 사용하는 태그이며 제목의 레벨에 따라 로 표현한다. 숫자가 올라갈수록 낮은 수준의 제목 레벨을 표현한다. Paragraph 태그 (p): 본문에 해당하는 내용을 단락 태그를 이용해 작성한다. Linebreak 태그 (br): 태그 내에서 임의로 개행을 하게 될 경우 사용하는 태그이다. 글의 줄바꿈을 생성하고 종료 기호 / 없..

1. HTML이란? HTML은 웹 페이지를 만들 때 사용하는 프로그래밍 언어이며, 웹 사이트들은 모두 HTML을 사용하여 만들어진다. HTML은 Hyper Text Markup Language의 줄임말이며, Hyper Text는 링크를 의미한다. 정보를 구조적이고 계층적으로 표현 가능하다. 2. HTML 문법 태그 HTML내에서 가장 중요하고 기본이 되는 규칙. 무언가를 표시하기 위한 꼬리표, 이름표 코드로 작성시 브라우저가 인식을 하고 내용을 표현하게 된다. 기호를 사용해 표현하며, 각 사이에 태그 이름이 들어간다. 시작 태그와 종료 태그로 이뤄져 있으며 종료 태그는 태그 이름 앞에 / 기호가 붙는다. 내용을 포함한 태그 전체는 요소라고한다. Hello, HTML 속성 태그에 추가로 정보를 제공하거나 ..