키워드 모음
앵커 태그, 글자 색 구글에 검색, css style, html, 브라우저 개발자 도구, 코드 자동 포맷
html 요소를 종첩이 가능하다. html이 뭐냐 css는 뭐임, 공식문서 MDN reference
인라인 스타일, 글로벌 스타일(선택자, 특성, 벨류, css규칙있음, 선택자), 메타 데이터
head, body, html 스켈레톤, 자동서식 단축키, 주석 css 선택자
개발자 도구에서 기본 설정 값 알 수 있다. 속성 선택자, 가상 선택자
hover, 파일 링크, 빈요소 구문, id 선택자, 절대단위 상대단위, google font 사용하기(원하는 글꼴만 가져와야 함), 폴백 폰트
//MDN이란 사이트에 들어가면 웹개발에 대한 참조가 자세히 적혀 있다.
https://developer.mozilla.org/ko/docs/Glossary/Object_reference
//글자 색 바꾸고 싶으면 이는 16진법, RGB값 등등 다양하게 표현이 가능하다.
찾고 싶으면 구글에 color picker라고 검색하면 된다.
//코드 자동 정리
Windows: shift + Alt + F
MAC: shift + Option + F
이거 누르면 자동으로 보기 좋게 정렬 됨
//a태그
<a></a> 태그는 하이퍼링크를 걸어주는 태그입니다.
hover: 마우스 닿으면 바뀌게 할 수 있다,
//google font기본 폰트만 쓰면 지루한데
Browse Fonts - Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
이 사이트 들어가면 꽁으로 쓰게 해준다.
사용법은
처음에 이렇게 나오는데 검색란에 원하는거 검색한다.
나는 눈에 띄는 것을 선택했다.
우측 상단에 보면 getfont가 있을텐데. 누르면
get embeded code 누르면 된다.
그럼 이런 화면이 나올텐데 head에 넣으라는 거 넣고 css에 넣으라는 거 넣으면 사용가능~~
1. html이 뭐냐~
웹사이트의 모습을 나타내기 위한 마크업 언어이다.
이걸로 웹사이트의 뼈대를 만드는 것이다.
<!doctype html>
html 코드 안에 저런게 써 있는건 html 버전을 나타내는 것이다.
지금 쓰는게 html5일 것이다.
그리고 head와 body로 이루어져 있는데
head는
문서의 정보, 타이틀, 설정값, CSS 등 다양한 설정?에 관한 정보가 들어가 있다.
안에는 meta data가 들어 잇는데 이는 <meta>, <link>, <style>, <script>. <title> 등이 있다.
검색엔진에게 페이지에 대한 추가적인 정보를 준다.
body는
보이는 모든 정보를 나타낸다고 보면 된다. 그림, 정보, 화면 등등
2. CSS가 뭐냐~~
HTML을 통해 뼈대를 만들면 거기에 글자 색, 폰트, 글자 정렬 등등 다양한 요소의 디자인을 구성한다.
사용 방법
1. HTML 안에서 style 속성을 이용하는 방법
2. <style> 태그를 통해 HTML 문서 내부에서 이용하는 방법
3. 별도로 CSS 파일을 분리하여 HTML의 문서에 연결하는 방법
css코드를 html 단락마다 하나하나 적용하면 귀찮겠지 이렇게 귀찮은 방법이
inline-style이라고 한다.
h1 {
font-family: "Oswald", sans-serif;
text-align: center;
color: crimson;
}이렇게 따로 style을 정의 해놓은 것을
Global-Style이라고 한다. 이는 모든 h1태그에 적용이 된다.
근데 전부 적용되면 조금 지루하지 않겠냐.
그래서
이렇게 특정 단락에 아이디 값을 주고
#으로 시작해서 특정 id값에 속성을 정할 수 있다.