Write and Make

  What is The Viewport? The viewport is the user's visible area of a web page. 뷰포트는 웹페이지에서 유저에게 보여지는 영역이다. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. 뷰포트는 디바이스에 따라 다양해진다. 그리고 컴퓨터 스크린 보다는 모바일에서 더 작다. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. 태블릿 과 모바일 전 웹페이지는 컴퓨터 스크린용으로 디자인 되었고, 그 것은 웹페이지가 고정된 디자인과 사이즈를 가지는 것에 일반적이었다. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. 그런뒤 우리가 태블릿과 모방리 폰으로 웹 서핑을 시작했을때, 고정된 사이즈의 웹페이지는 뷰포트를 맞추기에 너무 컸다. 이점을 수정하기 위해서, 그 장치들의 브라우저들은 화면을 전체 웹페이지 맞추기 위해서 전체 스케일 다운을 했다. This was not perfect!! But a quick fix. 이것은 완벽하지 않지만!! 빠르다. 즉, 뷰포트는 브라우저 화면에서 유저들에게 보여지는 영역이다. 여러장치들이 나오면서 뷰포트의 화면크기도 달라지기에 자동으로 스.케일이 조정되는 것이 필요해진

CSS 스타일에서 크기를 지정하는 방법 중 상대단위 rem 을 알아보자. rem 은 root 엘리먼트에 설정된 폰트크기 를 기준으로 한다. root element 라고 기억하면 좋다. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     html {       font-size : 16px ;     }     div {       font-size : 3rem ;       border : 1px solid black ;     }     #top-div {       font-size : 2rem ;     }     </ style > </ head > < body >   < p > The font-size of this document is 16px. </ p >   < div id = "top-div" >     The font-size of this div element is 2rem,     which translates to 2 x the browser's font size.     < div > The font-size of this div element is 3rem.       It also shows that it does not inherit from its parent element font size.     </ div >   </ div &

CSS 단위 중 % 이다. %는 부모 요소에 적용된 폰트크기 를 기준으로 크기를 설정한다 즉, 부모폰트의 % 이다. 이런식으로 말이다. 코드를 보자 <! DOCTYPE html > < html > < head > < style > body {   font-size : 16px ; } div {   font-size : 150% ;   border : 1px solid black ; } </ style > </ head > < body > < p > The font-size of this document is 16px. </ p > < div > The font-size of this div element is 150%. </ div > < p > The % unit sets the font-size relative to the current font-size. </ p > </ body > </ html > body 요소에서 16px 로 폰트를 설정했다. div 요소의 폰트사이즈는 font-size : 150% 이다. 즉, 부모요소의 16px * 1.5 = 24px 이 된다. 고정 픽셀값 보다 부모 텍스트 크기에 맞게 유연적으로 대처가 가능하다.       

CSS에는 길이를 표현하기 위한 여러 단위가 있다. width , margine, padding, font-size 등등이 그러하다. 이러한 길이는 숫자 다음에 px 및  em, %, rem 등의 단위를 가진다. 모든 내용을 다 숙지할 필요는 없지만 대표적인 몇 가지 단위는 그 의미를 이해하면 좋다. CSS 길이단위의 가장 기본은 픽셀이다. px : 모니터 화소 사각형 1개의 크기를 의미하는 절대단위로, CSS에서 사용하는 가장 기본 단위이고, 결국 모든 길이의 단위는 픽셀로 환산된다. 하지만, 여러 해상도에 동일한 위치와 크기 비율을 설계하고 싶다면 픽셀보다는 상대적인 단위를 사용하는 것이 유리하다. 상대적인 단위 중 em을 알아본다. em 은 요소의 폰트사이즈 크기에 연관된 사이즈를 나타낸다. 예로, 2em은 요소에 적용된 폰트 사이즈의 두배 라는 뜻이다. 예제를 본다 <! DOCTYPE html > < html > < head > < style > p {   font-size : 16px ;   line-height : 2em ; } div {   font-size : 30px ;   border : 1px solid black ; } span {   font-size : 0.5em ; } </ style > </ head > < body > < p > These paragraphs have a calculated line-height of: 2x16px = 32px. </ p > < p > These paragraphs have a calculated line-height of: 2x16px = 32px. </ p > < p > These paragraphs have a calculated line-height of: 2x16px = 32px. </ p > < div > The font-si

"기본 스타일 시트" 란  브라우저에서 기본적으로 지원하는 스타일을 의미한다. 즉, 폰트, 색상 및 여백 등등...기본적으로 브라우저 마다 지원하는 스타일이다. 개발자가 스타일시트를 정해주지 않아도 기본적으로 지원되는 디자인 스타일 양식인 것 이다. 예를 들어 h 태그의 경우도 우리가 별도의 스타일 시트를 주지 않아도 브라우저에서는 기본적으로 크기를 지정하고 있고, 결과적으로   h1~h6까지를 우리는 사용할 수 있다. [브라우저에서 지원하는 기본 스타일 시트] 그럼 기본 스타일 시트를 하기처럼 변경한다면   < style >     h1 {       color : brown ;           }   </ style > </ head > < body >     < h1 > h1 </ h1 >     < h2 > h2 </ h2 >     < h3 > h3 </ h3 >     < h4 > h4 </ h4 >     < h5 > h5 </ h5 >     < h6 > h6 </ h6 > </ body > h1태그의 컬러는 브라운으로 변경된다. 사용자 스타일 시트가 잘 적용되었다. 이것이 바로 스타일시트를 사용하는 방법 중 하나이다.

CSS 하위 선택자는 특정 부모 밑의 하위요소를 선택할때 사용이 된다. Syntax 부모선택자 하위요소 선택자{     스타일 } 선택자는 부모 그리고 부모밑의 하위(자식,손자...) 선택자 두개로 이루어지면 선택자 사이에는 공백으로 구분한다. 소스를 보자. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     div li {       color : brown ;           }   </ style > </ head > < body >   < div id = "container" >     < ul >       < li > 첫번째 항목 </ li >       < li > 두번째 항목 </ li >       < li > 세번째 항목 </ li >       < li > 네번째 항목 </ li >     </ ul >     < p >     동해물과 백두산이 마르고 닳도록 하느님이 보우하사           우리나라 만세     </ p >   </ div > </ body > </ html > div 부모밑에 li 하위요소만 스타일을 적용하였다. 브라우저에서 확인한 결과는 하기와 같다. 부모 밑에 특정 하위요소 들만 선택할때는 하위 선택자를 사용

CSS그룹선택자 는 여러 선택자가 동일한 스타일 시트를 사용할때 여러 선택자를 하나로 묶어서 사용할 수 있는 장점이 있다. 그룹선택자 syntax 선택자1 , 선택자2, 선택자3{     스타일  } 다음과 같은 선택자들이 있다고 할때   < style >     .container {       color : blue ;     }     p {       color : blue ;     }     h3 {       color : blue ;     }   </ style > 그룹선택자 를 활요하면 하나로 묶을 수 있다.   < style >     .container , p , h3 {       color : blue ;     } </ style > body에 적용된 HTML요소가 아래와 같다면 그룹선택자 스타일 시트 가 적용된다.   < div class = "container" >     < h1 > 타이틀 영역 입니다 </ h1 >     </ div >   < p >     이곳은 문단 입니다.   </ p >   < h3 >     h3 텍스트 입니다.   </ h3 > 웹브라우저에서 확인한 결과는 모두 스타일시트 가 잘 적용되었다.

CSS 자식선택자 를 정리해본다. 먼저 소스를 보자 <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width,      initial-scale=1.0" >   < title > Document </ title >   < style >     .box > p {       color : red ;     }   </ style > </ head > < body >   < div class = "box" >     < h3 > 자식 선택자 예제 입니다 </ h3 >     < p > 안녕하세요. 여기는 p태그 입니다 </ p >   </ div > </ body > </ html > 자식선택자의 Syntax 이다. 부모선택자 > 자식선택자 {      스타일     } 자식선택자 가 선택할 수 있는 HTML요소는 부모요소 밑에 특정자식을 선택할 수 있다. 위 코드에서는 box 클래스 요소 밑의 p 요소에만 컬러 스타일을 적용한다. 브라우저에서 확인한 결과는 

구글 폰트를 적용하는 방법이다. 1. 구글폰트 사이트에 접속한다. https://fonts.google.com/ 접속하면 여러가지 폰트들이 있다. 하나의 폰트를 선택하고 다운로드 혹은 웹에서 사용할 수 있는 웹폰트를 적용해본다. 2. 폰트 적용하기(폰트 확인하ㄱ 예시로, Language 애서 한국어 를 선택하고 리스트된 폰트 중 하나를 선택한다. 해당폰트의 Glyphs 탭에서는 지원언어를 확인할 수 있고, 언어별 폰트 미리보기가 가능하다. Type tester 탭에서는 폰트를 미리 타이핑 해볼 수 있다. 3. 폰트 다운로드 Get font 버튼 클릭! 여기서는 폰트가 설치되어있지 않아도 폰트를 적용할 수 있는 웹폰트 방식으로  설치를 해본다. 즉, 유저의 PC에 해당 폰트가 없어도 링크방식으로 해당 폰트를 사용할 수 있다.  <>Get embeded code 를 선택한다. 브라우저 웹폰트를 적용하기 위해서 Web 탭에 link, @import 둘중 하나를 선택한다. 여기서는 link 로 진행한다. 4. 웹 폰트 적용하기 - link 요소는 head 태그 사이에 붙여넣고, CSS 스타일은 <style>태그를 만들어서 붙여넣는다. 여기서 스타일시트는 내부스타일시트 방식을 사용했다. 상황에 따라 외부스타일시트 방식을 사용할 수도 있다. <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > web font </ title >   < link rel = "preconnect" href = "https://fo

CSS속성 선택자 는 HTML 속성을 선택할 수 있는 선택자 타입이다.  syntax [ 속성 = "속성값"] { 스타일 } [] 사이에 속성 혹은 속성="속성값" 을 주면, 해당 속성을 가진 HTML요소들에 스타일을 정교하게 설정할 수 있다. <! DOCTYPE html > < html > < head > < style > [ target ] {   background-color : yellow ; } </ style > </ head > < body > < h2 > CSS [attribute] Selector </ h2 > < p > The links with a target attribute gets a yellow background: </ p > < a href = "https://www.w3schools.com" > w3schools.com </ a > < a href = "http://www.disney.com" target = "_blank" > disney.com </ a > < a href = "http://www.wikipedia.org" target = "_top" > wikipedia.org </ a > </ body > </ html > 위 소스에서는  target 이라는 속성을 가진 요소만 선택하기 위해서 속성 선택자를 선언했다. 결과는 예상했던것 처럼, target 속성이 설정된 두개의 하이퍼링크 텍스트에만 스타일이 적용된다. target 속성에만 설정된 스타일 [] 앞에 태그 혹은 클래스, 아이디 를 같이 사용할 수도 있다. 위 코드는 하기와 같이 응용이 가능하다. < head >

CSS 클래스 선택자는  HTML class 속성값이 선택자와 동일한 경우 해당 요소에 스타일을 적용하는 방법이다. 하나의 HTML 문서내 동일한 class 속성값이 여러개 있다면 동시에 스타일 적용이 가능하다. syntax .class속성값{ 스타일 } < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     #content {       color : brown ;     }     .dummy {       color : blueviolet ;     }   </ style > </ head > < body > < h1 > 클래스 선택자 </ h1 > < p id = "content" > 문단의 시작점 입니다. </ p > < p class = "dummy" > 클래스 선택자는 선택자로 설정된 클래스 속성값 과동일한   요소들에 스타일이 적용된다 </ p > < div class = "dummy" >   Lorem Ipsum is simply dummy text of the printing   and typesetting industry.   Lorem Ipsum has been the industry's standard dummy   text ever since the 1500s, </ div > </ body > </ html > 위 코드에서는 dummy 라는 class 속성값을  가진 요소

CSS id 선택자는  선택자로 지정한 id 가 HTML 태그 id속성과 일치하는 요소에만 스타일을 적용할 수 있다. syntax #id{ 스타일 } 소스를 보자 <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     #content {       color : brown ;     }   </ style > </ head > < body > < h1 > 아이디 선택자 </ h1 > < p id = "content" > 아이디 선택자는 해당 아이디를 가진 요소에만 스타일이 적용된다. </ p > < p > 아이디 선택자는 하나만 설정이 가능하다. </ p > </ body > </ html > #content 라는 id 속성을 가진 HTML 요소를 찾는다. 참고로, HTML id 속성값은 하나의 웹 문서에서 고유한 식별값을 가진다. content 라는 id를 해당 요소에서 사용했다면, 다른 요소들은 해당 아이디를 가지면 안된다. HTML 가이드 문서에서도 이렇게 나와있지만, 브라우저에서 id 속성값을 중복으로 지정해도 설정이 된다. 조금 이상하다. 하지만, 표준은 아니기에 이렇게 쓰면 안될거 같다. [아이디 선택자를 브라우저에서 실행한 결과]  

CSS태그 선택자는 선택자로 명시된  모든 태그 요소에 스타일을 적용할 수 있다. Syntax 이다. Tag{ 스타일 } <! DOCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     p {       color : brown ;     }   </ style > </ head > < body >     < h1 > 태그 선택자 </ h1 >     < p > 태그 선택자는 태그명과 일치하는 요소에 스타일을       적용할 수 있다. </ p >     < p > 두번째 문단에도 스타일이 적용된다. </ p >   < body > </ html > 태그를 사용하여서  손쉽게 특정요소 들에 접근 할 수 있는 장점이 있다. 위 예제에서는 p요소들에 색상을 지정한다. 브라우저에 적용된 태그 선택자

CSS 전체 선택자는 HTML 문서 전체에 스타일을 적용할 수 있는 선택자 타입이다. Syntax 는 다음과 같다. * { 스타일  } 소스를 보자 <! D OCTYPE html > < html lang = "en" > < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     * {       color : brown ;     }   </ style > </ head > < body > < h1 > 전체 선택자 </ h1 > < p > 전체 선택자는 모든 요소에 스타일을 적용할 수 있다. </ p > </ body > </ html > * 이 모든 요소를 가리킨다는 의미이다. 전체선택자로 인해서  h1, p 태그도 색상이 수정되었지만, 위 문서에 보이는 모든 태그 와 요소에 스타일이 적용이 된다. 웹브라저에 실행한 결과는 아래와 같다.

CSS를 HTML에 적용하는 방법에는 3가지가 있다. 내부 스타일 시트, 외부 스타일 시트, 인라인 스타일 이다. 1. 내부스타일 시트 HTML에서 제공하는 style 태그를 사용한다. style 태그안에 스타일시트를 선언한다.  < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < style >     h1 {       color : royalblue ;     }   </ style > </ head > < body >   < h1 > 내부 스타일 시트 적용 텍스트 입니다. </ h1 >   </ body > 선택자 로 h1 을 그리고 선언부에는 컬러값 을 주었다. h1 요소의 컬러 를 royalblue 로 설정하라는 의미 이다. style 요소의 위치는 일반적으로 head 영역에 두어서, body 영역의 html요소들에 스타일을 적용한다. 이는 위에서 아래로 내려오면서 문서를 분석하는 브라우저 엔진의 특성 때문이다. 2. 외부스타일 시트 동일한 코드를 외부스타일 시트로 바꾸어본다. HTML문서는 훨씬 간결해진 모습이다. [index.html] < head >   < meta charset = "UTF-8" >   < meta name = "viewport" content = "width=device-width, initial-scale=1.0" >   < title > Document </ title >   < link r