이틀동안 HTML&CSS Repl.it 문제를 풀면서 배운 내용을 정리해보려고 합니다.
이전에도 html과 css에 대하여 정리하였지만... 망각의 동물인 저는 다 까먹어 버렸답니다. 그래서 다시 복습을 위해 펜을 꺼내들었습니다.
HTML의 정의와 기능
- HTML은 웹 페이지를 만들기 위한 언어입니다.
- HTML로 웹페이지의 구조를 잡을 수 있습니다.
- HTML 파일은 이미지, 텍스트, 비디오, 버튼 등 웹사이트에 보여줄 내용을 구성하고 있습니다.
- 브라우저(safari, chrome, ie..)는 HTML파일을 가지고 뭘 어떻게 그려주면 되는지 파악한 후에 웹 페이지를 생성합니다.
HTML tag
HTML 요소(element)에는 opening tag, content, closing tag 가 있습니다.
HTML에서는 이미지나 텍스트를 그려주려면 그에 맞는 태그가 필요합니다.
대부분의 태그는 시작하면 끝맺음을 해야하는데, 예외적인 것들이 있습니다.
IMG 구현하는 <img> 나 줄바꿈 태그인 <br> 처럼..
https://www.advancedwebranking.com/seo/html-study/
HTML Study
Overview This HTML usage data comes from 11.3 million index pages gathered from top twenty Google results, for about 30 million keywords - chosen by keyword volume. To learn more about this data, visit the FAQ section. Total 11,264,652 pages Doctype The
www.advancedwebranking.com
이 사이트에 가보시면 tag 의 사용 빈도에 따른 순위를 볼 수 있습니다. 참고 용으로 올려봅니다.
태그 안에는 속성을 지정할 수 있습니다. class, id , src, href 등 속성을 부여하여 이미지를 넣거나 링크를 걸 수 있고 css와 연동되는 class나 id 값을 넣어 더 아름다운 웹페이지를 만들 수 있습니다.
HTML 파일의 구조
Visual Studio 를 이용하면 !만 쳐도
이것 플러스
이것이 함께 쳐서 나옵니다. head body 와 같은 것은 안에 내용을 넣기 위해 구분해 놓은 태그인 것을 아는데 meta 태그는 도무지 알 수 없어서 해설을 좀 해보려고 합니다.
- <meta charset="utf-8"> : 한글, 일본어, 중국어가 포함된 페이지라면 utf-8 이라는 값으로 문자 인코딩을 추가해줘야 합니다.
- <meta name="viewport" content="width=device-width">: 디바이스의 가로 크기가 곧 웹 페이지의 가로와 같다는 의미입니다. 모바일에서 웹사이트가 예쁘게 잘 보이려면 추가해야 하는 정보입니다. 해당 정보를 추가하지 않으면 데스크탑 버전의 웹페이지가 축소되어 보이는 현상이 나타납니다.
요새는 웹페이지를 모바일이나 태블릿 pc로도 많이 보기 때문에 상기와 같은 meta 태그를 사용하면 좋을 것 같습니다.
CSS 적용
html 에 css 적용 방법
1. inline style
태그 style 속성에 직접 작성할 수 있습니다.
이런 식으로
2. style tag
html 파일에 직접 style 태그를 이용해서 css를 작성하는 방법이 있습니다.
기능적으로 분리되지 않았기 때문에 유지보수에 적합하지는 않지만 같은 페이지에서 작성하기 때문에 편하고 빠른 방법이 될 수 있습니다.
3. css 파일에 작성
html과 css 파일을 분리하여 css 파일에 따로 작성하는 방법입니다.
상기와 같이 html 파일에 작성을 하면 stlye.css 파일에 적용한 이쁜 것들을 html 웹에서 확인 할 수 있습니다.
CSS 작성법
css 작성법에서 가장 흥미로웠던 것은 여러개의 tag와 id, class 가 있어도 구분만 잘 지어준다면 따로따로 css 기능을 부여할 수 있습니다.
예를 들어,
<p class="pre">내용내용내용<p>
가 있을 때 css 파일에서 p 태그이면서 pre class 인것을 바꿔줘라를 명령할 때
p.pre{} 이렇게 명령을 하면 되고 (띄어쓰기 불필요)
<div class='pre'><p></p></div>
에서 pre class 안에 p태그인 것을 css 적용해라하면
.pre p {} 이렇게 명령을 내리면 됩니다.(띄어쓰기 필요)
Font Style
css에서 font style을 바꾸기 위한 방법
font-family 이용
상기와 같이 되어있으면
브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용,
Georgia 폰트가 지원되지 않으면, "Times New Roman"을 적용,
이것도 지원되지 않으면 Times을 적용,
앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
(이 기능은 사용해보지 않았는데 다음에 이용해보겠습니다.)
font-wight 이라는 기능을 이용하면 글씨의 두께를 변경할 수 있습니다.
font-weight : 100~900 등의 값이 지정될 수 있고
400 = normal / 700=bold 이런 값이 있습니다.
글자의 색상을 변경하는 주문은
color : 입니다. color는 3가지 방법이 있지만 지금이 어느 시대입니까..... color zilla 라는 구글 기능을 이용해서 색을 알아보거나 뭐 이쁜 색을 가져다가 사용하면 되겠지요...
html 인용태그 및 띄어쓰기
<blockquote>라는 태그는 인용구문을 넣을 때 쓰는 태그이고 브라우저에서 양쪽 여백을 넣는 기본 스타일을 자동으로 적용합니다.
는 띄어쓰기를 의미합니다. 띄어쓰기가 필요할 때 사용하세요!
box-sizing
대부분의 웹페이지에 box-sizing 프로퍼티를 기본적으로 적용합니다. 모든 태그에 이 프로퍼티를 적용하면 코드가 길어지기 때문에
상기와 같이 작성하여 코드를 단순화 하고 웹페이지도 이쁘게 만들면 됩니다.
웹 페이지 - 이미지 넣기
가장 많이 쓰이는 방법
img 태그를 이용하여 이미지 삽입
alt는 이미지가 뜨지 않았을 때 이미지 대신 보여줄 텍스트입니다.
src는 이미지 파일 경호 or 이미지 url 주소
font awesome 이라는 웹 페이지를 이용하여 이미지를 삽입할 수 있습니다. (물론, 다른 프로그램도 많아요)
font awesome 사용하기 라고 검색해서 사용법을 익혀봐요 ㅎㅎ
백그라운드 이미지로 이미지 삽입
이렇게 배경에 그림을 넣어주는데 그림의 크기가 나눠준 구역의 크기와 다를 때는
background-size 나 width, height 를 바꿔가면서 크기를 맞춰보세요 ㅎㅎ
일단 요기까지 작성하고 2탄에서 봐요~
