HTML은 뼈대, CSS는 꾸미기, JAVA는 구동
HTML 은 문서형태를 기반으로 한다.
전체적으로 <태그></태그>로 표현되어있다. meta 태그처럼 닫는 태그가 없는것도 있다.
<Head>와 <body>로 구성되어 있는데
Head는 보여지는 인터넷창 외의 부분을 담고있다.
(인터넷창 이름, 아이콘, 구글검색엔진이 내 사이트를 퍼가기좋게 만드는 것들, 그리고
CSS, JAVA, 그리고 사이트를 카톡 등에 공유했을때 보이는 썸네일정보 등이 다 헤드에
들어간다.
body 에는 인터넷 창 안에 보여지는 부분이 다 들어간다.
<div> 태그는 여러요소를 묶어 구역을 나눠준다. 그룹화해서 한번에 이동할때 사용.
<p>는 문단.
<ul> <li> bullet point </li> </ul>
- bullet point
<h1>은 제목, 페이지마다 하나씩 있어야하고 구글검색에서 사용된다.
<h2>는 소제목, h3~h6 도 있음.
<span>은 문장에서 특정 글씨를 감싸서 다르게 표현할때 사용.
a태그는 <a href="http://naver.com/"> 하이퍼링크 </a>
img 태그 <img src="이미지주소" />
정보입력하는 input태그 <input type="text" />
button <button>버튼입니다</button>
<hr> 은 가로 구분선
textarea 긴글 적는 공간, <textarea>나는 무엇일까요?</textarea>
*태그들은 외우는게 아니라, 복사해서 붙여사용한다!
*태그를 사용할때는 줄을 맞춰 알아보기 쉽게 적는다 (command + alt + l) tap 자주쓰는 CSS
body안에 있는 div 를 꾸며줄 때는 먼저 어떤 div를 가리키는지 알 수 있도록 class="" 으로 명찰을 달아준다.
예) <div class="title">
명찰은 2개(ex. title, font) 붙일 수도 있다.
예) <div class="title font">
그다음, <head> 에 <style>을 주고 .이름 으로 불러주어 CSS를 꾸며준다.
예) <style> .title { 중괄호 안에 꾸며주는 내용 } </style>
그리고 div를 적용시킬때는 background-color 를 입혀서 눈으로 확인한다.
눈으로 div를 확인 후 사이즈 설정(width, height)을 하고
그 안의 요소들을 어떻게 꾸밀지 적어준다
(color, text-align: center; ,Background-image, 모서리 둥글게 border-radius 등)
백그라운드 이미지는 3줄이 세트
background-image: url("")
background-size: cover; 마스크씌우기
background-position: center; 위치중앙그 다음 background-color 없애주면 된다.
div 안의 요소에 여백:
padding(안쪽으로), margin(바깥으로)
여백방향은 시계방향으로 margin: 20px(위) 0px(오른쪽) 0px(아래) 0px(왼쪽)
따로 줄때는 margin-top, margin-bottom 과 같이 정확히 설정해준다.
전체div를 화면가운데로 놓을 때는, 양쪽여백을 자동으로 설정.
(margin: auto; )
*주의할점: 글속성일때는 여백을 인식하지 않으므로, 박스로 속성을 지정해줘야한다
(display: block; )
주석을 달아 웹에는 뜨지 않지만 참고용으로 적어 코딩에서만 확인해 볼 수 있는데,
주석으로 사용할 문구를 선택하고 ctrl + / 하면 된다.
(한번더 누르면 해제되고, 붙는 위치나 내용에 따라 모양은 달라진다. 상관X)
6개의 댓글
'스타일시트'로 스타일을 따로 빼내어 (파일화, 라이브러리같은 개념) 그것을 링크로 걸어 사용할 수 있다.
파일 정리, 간료화에 좋다
html 로 적을때는 <style></style> 안에 적지만, 따로 파일화 해서 붙일때는
<head>안에 붙인다
구글웹폰트 사용
https://fonts.google.com/?subset=korean
원하는 폰트의 font link를 <title> 밑에 붙이고, font family를 복사해서
<style> 안에 *{ 붙여넣기 } 해서 씀 (전부적용한다는 뜻)
CSS 는 style, javascript는 script
Javascript는 브라우저가 유일하게 알아들을 수 있는 언어
자바스크립트는 해당 페이지 마우스 오른쪽 검사를 눌러 console에서 바로 확인할 수 있다.
부트스트랩(이미 만들어놓은 CSS) 을 가져와서 쓰면된다.
*사용시에는, JAVA, CSS가 담겨있는 기본 부트스트랩 코드스니펫을 사용한다.
가져온 부트스트랩에 나의 CSS를 중첩, 수정해서 사용하면 된다!