프로젝트4 - div 섹션 구역 분리 와 CSS 스타일 적용하기

이미지
웹 브라우저에 표시되는 글자와 이미지 들에 디자인 적인 효과( 배경색, 글자색, 크기 조절...) 및 브라우저 내에서의 배치등을 조절하기 위해서는 구역을 나누면 편리해진다. 바로 구역(섹션) 을 나누어 주는 역할을 하는 태그가 div 이다. <div>태그는 브라우저에서 보여지는 시각적 기능은 없다. 단지, 구역을 나누는 역할을 한다.  코드를 만들어 본다. <!DOCTYPE html> <html> <head>   <title>div</title> </head> <body>   <div>     <p>Ice cream is a frozen dessert typically made from milk or cream that has been flavoured with a sweetener,        either sugar or an alternative, and a spice,        such as cocoa or vanilla, or with fruit, such as strawberries or peaches.</p>   </div>   <div>     <p> Food colouring is sometimes added in addition to stabilizers.        mixture is cooled below the freezing point of water and stirred to incorporate air spaces and prevent detectable ice crystals from forming.        It can also be made by whisking a flavoured cream base and liquid nitrogen together.        The result is a smooth, semi-solid foam that is solid at v

프로젝트3 - 이미지가 있는 웹페이지만들기

이미지
이미지가 있는 웹 페이지를 만들어 본다. <img> 태그 를 사용하면 이미지를 웹페이지에 넣을 수 있다. <!DOCTYPE html> <html> <head>   <title>Image</title> </head> <body>   <img src="img/pexels-teejay-1362534.jpg" alt="ice cream"> </body> </html> 이미지 태그 안에는 src 라는 속성이 있는데 여기에 이미지 경로를 넣는다. 위 예제에서는 img 라는 폴더안에 들어있는 이미지를 참고한다. alt 는 alternative 의 약자로  대체 문자라고도 한다. 브라우저에 따라 마우스를 이미지에 올리면 이 대체텍스트가 표기가 된다. 그리고,  인터넷 및 여러이유로 이미지가 나오지 않을때 이미지 영역에 이미지  대신 대체 텍스트가 표시 된다.  위 코드를 html 파일형식으로 저장하고 브라우저에서 실행하면, 이미지가 예쁘게 잘 나온다. 드디어 이미지가 브라우저에 나왔다. 프로젝트1,2 를 통해 글자를 적어보았고, 이미지도 넣었다. 그럴듯한 웹 페이지가 탄생했다. 추가로 한가지 더 살펴보자면, img 태그는 로컬경로(컴퓨터에 저장된) 의 이미지를 불러올 수 도 있지만 외부의 경로 즉, 다른 웹페이지의 이미지도 참조가 가능하다. 위 예제와 동일한 이미지를 웹페이지에서 가지고 온다. 이미지를 선택 후 오른쪽 마우스 클릭! 이미지 주소를 복사 한다.   <img src="https://images.pexels.com/photos/1362534/pexels-photo-1362534.jpeg?auto=compress&cs=tinysrgb&w=600"    alt="online image"> src 속성에 붙여넣는다. 이미지의 고유 url이 보인다. alt 속

project2 - 문단 쓰기와 한줄 띄우기

이미지
프로젝트2 에서는 문단 과 한줄 띄우기 방법을 코딩해본다. <!DOCTYPE html> <head>   <title>Mini Project2</title> </head> <body>   <p>     P 태그를 사용해서 문단을 만들수 있다.HTML에서는 별도의 공백을 준다고 해서     띄어쓰기가 되지 않는다. 띄워쓰기를 할려면 <br/> 태그를 사용해야 한다.     <br/>태그는 닫힘태그로 하나만 써주어도 동작한다. 열림 태그로 표시해도 되지만     html태그의 일관성을 위해서 닫힐때는 "/" 를 닫힘 태그를 해주는 것이 보기는 좋다.   </p> </body> </html> 브라우저에서 코드를 실행한다. p 태그를 사용하면 P태그 사이의 내용들이 문단으로 보여진다. br 태그는 띄어쓰기를 위해서 사용된다.  html 에서는 공백이 띄어쓰기 가 아니기에  별도로 br태그를 써 줘야 한다. br 태그를 쓸때는 닫힘태그 하나만 써도 되며, 코드 직시성을 위해 </br> 로 표기해주면 좋다. p와 br 태그만을 썼을 뿐인데, 웹페이지에 그럴듯한 텍스트 기사를 써내려 갈 수 있게 되었다.

Project1 - 웹 페이지 만들기

웹 브라우저를 통해서 우리는 매일 웹 서핑 과 웹 앱 그리고 웹 게임등 다양한 작업을 수행 할 수 있다. 1. 웹 브라우저를 열고  2. 주소를 넣고 (URL 입력) 3. 엔터를 치는 순간 우리는 4. 웹 서버에 있는 웹 페이지에 접근하게 된다. 5. 그리고 다운받은 웹 페이지는 우리가 사용하는 브라우저에 의해서     해석 되어서 우리에게 보여진다. 이게 바로 웹 페이지의 구동 원리이다. 가장 단순히 나열하자면 위와 같다.  전세계 사람들이 웹페이지를 접소하니 아이폰과 안드로이드가 있다고 하지만 가장 많이 사용되는 앱은 어찌보면 웹 기반의 S/W가 아닐까 싶다. 이런 웹 페이지를 만드는 가장 단순한 방법은 노트패드를 펴서 작성할 수가 있다. 단지 우리는 PC만 필요할 뿐이다. 물론 노트패드가 불편하기에 가장 대중적인 에디터인  비주얼 스튜디오 코드( VSC ) 를 사용하면 된다.  하기 처럼 작성하고... <! DOCTYPE html > < html > < head >     < title > Coding </ title > </ head > < body >   Hello World!   </ body > </ html > Hello World.html 로 작성한 뒤  해당 파일을 브라우저로 열면 여러분의 첫 웹 페이지가 탄생하게 된다. 당당히 브라우저에는 Hello World! 라는 글자가 보이게 된다. 바로 이러한 웹 페이지를 만드는 것인 HTML 이라는 언어이다. HTML언어만 가지고서도 웹 페이지를 제작할 수 있다. 이렇게 제작된 웹 페이지는 여러분이 웹 서버를 구축한다면 세상 모든 사람들이 볼수 있는 웹 페이지가 된다. 생각만 해도 설레이지 않은가... 이것이 바로 코딩이다. HTML 에 CSS 와 JS 라는 언어를 추가하면 여러분들이 웹 서핑에서 보았던 다양한 웹 페이지를 만들 수 있다. 물론 웹 앱 및 게임도 가능하다.

Viewport 란? 무엇인가요??

이미지
  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 unit - 상대단위 rem

이미지
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 Unit (단위) %

이미지
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 units(단위) - em

이미지
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태그의 컬러는 브라운으로 변경된다. 사용자 스타일 시트가 잘 적용되었다. 이것이 바로 스타일시트를 사용하는 방법 중 하나이다.

자바스크립트 대표이미지

이미지

이 블로그의 인기 게시물

구글 블로그 이미지 복사 붙여넣기 가능한가요?

HTML 페이지 기본 구성.(HTML Page Structure)

구글 블로그 대표이미지 설정하기