css
-
Learn HTML & CSS. 8.Box modelStudy/HTML & CSS 2016. 12. 5. 15:28
Review what I learned 모든 HTML 요소들은 박스로 둘러싸여져 있다. 박스는 2차원으로 width와 height 성분이 있다. 이들은 각각 width 속성과 height 속성으로 설정이 가능하다. width, height 속성들은 pixels, ems, percentages 의 세 단위로 입력될 수 있다. 이는 px, em, % 이다. 박스들의 width와 height의 최댓값, 최솟값을 설정할 수 있다. 이는 사용자들이 브라우저 크기를 조정할 때 내용들이 읽기 쉽게 유지될 수 있도록 도와준다. 각각 max-width max-height min-width min-height 로 설정할 수 있다. 박스의 크기가 너무 작아지면, 내용들이 잘려서 보이지 않게 된다. 이를 조절할 수 있는 속성..
-
Learn HTML & CSS. 7.Classes, IDs & DivsStudy/HTML & CSS 2016. 12. 2. 11:49
Review what I learned ID와 클래스, Div 를 사용하여 구성된 코드는 가독성이 매우 좋아진다. ID 는 HTML 해당 태그를 페이지에서 식별할 수 있게 해준다. Class에 포함된 태그들은 같은 style을 공유하게 된다. 그로 인해 styling 하는 것이 더 효율적이게 된다. (division) 는 내부의 태그들을 그룹으로 묶어준다. 이는 페이지를 논리적 단위로 구성할 수 있게 해주어서 HTML 파일의 가독성을 더 늘려준다. 한 HTML 태그가 여러개의 클래스에 포함될 수 있다. Div 태그는 아주 많이 쓰이는 HTML 태그이다. 웹 개발자에게는 "이 태그를 어떻게 쓰는 지"가 매우 중요하다. 출처 : codecademy(HTML & CSS)
-
Learn HTML & CSS. 6.Styling with CSS(Fonts)Study/HTML & CSS 2016. 12. 1. 21:21
Review what I learned 폰트 서체는 font-family 속성을 이용하여 바꿀 수 있다. Serif 폰트는 대문자 I 나 소문자 l 같은 같은 활자에서 아래・위에 가로로 가는 선이 나있는 서체이며, Sans-Serif 는 그렇지 않은 서체이다. (I I, l l) 아이와 아이, 엘과 엘, Serif와 Sans-Serif Fallback 폰트는 혹시 방문자의 컴퓨터에 CSS에서 설정한 서체가 설치되어 있지 않을 때 대신 적용되는 서체이다. 구글 폰트는 free fonts 이며, HTML파일에 link 태그로 연결하여 사용할 수 있다. 폰트의 크기는 font-size 속성을 이용하여 바꿀 수 있으며, pixels(px), ems(em), percentages(%) 를 단위로 사용한다. 각 줄..
-
Learn HTML & CSS. 5.Styling with CSS(Colors)Study/HTML & CSS 2016. 11. 30. 16:55
Review what I learned Foreground Color는 해당 태그의 실제 보이는 내용의 색을 뜻한다. 이는 color 속성으로 설정할 수 있다. Background Color는 해당 태그의 보이는 내용 뒷 배경의 색을 뜻한다. 이는 background-color 속성으로 설정할 수 있다. 편하게 사용할 수 있는 named color가 147 가지 있다. (Red, Blue, Aqua 등) RGB(Red, Green, Blue 빛의 3원색) 또는 16진법(예. #B2325D)으로 색을 표현할 수 있는데, 이는 16,000,000(16백만) 가지의 색이 가능하다. HSL(Hue, Saturation, Lightness)은 CSS3에서 색을 정의하는 새로운 방법이다. (설명) RGBa 또는 H..
-
Learn HTML & CSS. 4.CSS Basic Structure & SyntaxStudy/HTML & CSS 2016. 11. 28. 13:37
Review what I learned CSS 셀렉터(selector)의 대상은 HTML의 태그이다. CSS 는 HTML 태그의 style을 정의한다. 이 정의는 반드시 두가지를 포함해야 한다. property - style을 정하기 원하는 속성 (예. 색, 글자 크기 등등) value - 해당 속성의 값 (예. Red, 12px 등등) CSS 정의의 마지막엔 반드시 세미콜론(;)이 있어야 한다. (C, JAVA 등 과 동일) (예. color : Blue; ) CSS 로 만든 규칙은 셀렉터와 셀렉터 내부의 정의들로 구성된다. (중괄호 { } 로 구성) 여러개의 태그를 동시에 style 할 때에는 한번에 셀렉터를 여러개 사용할 수 있다. 예. h1, p { 정의~ } 주석은 유지보수를 쉽게 할 수 있도록..
-
Learn HTML & CSS. 3.CSS SetupStudy/HTML & CSS 2016. 11. 25. 18:08
Review what I learned 코드의 유지보수를 더 편하게 하기 위해 HTML과 CSS 파일은 나누어서 저장한다. (C++에서 코드와 헤더를 나누듯이) HTML파일 내부에 태그를 이용하여 CSS코드를 쓸 수 있다. CSS 파일은 태그를 통해 HTML 파일과 연결되어 사용할 수 있다. 그리고 세가지 속성들이 필요하다. href - CSS파일의 경로(예. /style.css)를 넣어주어야 한다. 상대경로 or 절대경로 type - text/css 를 넣으면 된다. (타입이 text로 이루어진 css 라는 뜻) rel - sytlesheet 를 넣으면 된다. (해당 파일은 현재 파일의 stylesheet 라는 뜻) 출처 : codecademy(HTML & CSS)
-
Learn HTML & CSS. 2.Common HTML ElementsStudy/HTML & CSS 2016. 11. 24. 17:03
Review what I learned 여러 크기의 heading을 쓸 수 있는데, 태그 부터 태그 까지 사용 가능하다. 크기는 h1이 제일 크며, h6로 갈수록 크기가 작아진다.. 단락(Paragraph)들은 태그로 주가할 수 있다. (나는 단락보단 문단으로 생각하는 편이다.) 순서가 정해지지 않은 리스트는 태그로 사용할 수 있다. (unordered list) 순서가 정해진 리스트는 태그로 사용할 수 있다. (ordered list) 각 리스트들의 목록들은 태그로 추가할 수 있다. 링크들은 태그로 이동하게 할 수 있는데, href 속성이 꼭 필요하다. (href = html reference) 이미지는 태그로 추가할 수 있다. src 속성이 꼭 필요하다. (src = source) 이미지가 엑박이 되..