1. atom 설치 https://atom.io/ 에서 다운로드
또는 sublinetext 설치 https://www.sublimetext.com/ 에서 다운로드
2. atom 설정 floder open해서 디랙터리 설정
3. ctrl +shift +p 에서 settings 입력
4. install: emmet , minimap
5. 태그<>
종류: <html> <head> <body>
숙제 로그인 화면 및 html 연습
| [ html css] 기초 태그 (0) | 2018.12.19 |
|---|---|
| 시맨틱 태그들 (0) | 2018.11.26 |
| margin과 padding의 개념 및 차이점 (0) | 2018.11.21 |
1. html의 기본 태그
1 2 3 4 5 6 7 8 9 10 11 12 | <html> <head> <title>코딩독학</title> </head> <body> </body> </html> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <html> <head> <title>코딩독학</title> </head> <body> <h1>코딩 독학</h1> <h2>코딩 독학</h2> <h3>코딩 독학</h3> <h4>코딩 독학</h4> <h5>코딩 독학</h5> <h6>코딩 독학</h6> <p> 단락 1 안녕하세요<br> 저는 코딩 독학 입니다. </p> <hr> <p> 단락2 오늘은 춥고 쌀쌀한 날씨이네요<br> 감기 조심하세요 ^^ </p> </body> </html> | cs |
| 1.기본 설정 (0) | 2019.05.02 |
|---|---|
| 시맨틱 태그들 (0) | 2018.11.26 |
| margin과 padding의 개념 및 차이점 (0) | 2018.11.21 |
#시맨틱 태그 #header #hn #article #section #footer #address
시맨택 태그: 문서 구조를 태그 이름만 봐도 쉽게 이해 할 수 있도록 해 놓은것
■ 정리
- 헤더(header) : 머리말 지정하기
- nav : 동일 사이트안의 문서나 다른 사이트의 문서로 연결하는 링크 모음
■문제1
■조건
- 애완경 종류, 입양하기, 건강돌보기, 더불어살기
- <h1>: 애완견 종류는
- <h2>: 활달한 강아지
- <h3>: 요크셔테리어, 말티즈, 포메라이언, 골든 리트리버,
- <p>: 나머지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <!DOCTYPE html> <html lang="ko"> <head> <meta charset="utf-8"> <title>내가 처음 만드는 HTML 문서</title> </head> <body> <header> <h1>애완견 종류</h1> <nav> <ul> <li><a href="#">애완견 종류</a></li> <li><a href="#">입양하기</a></li> <li><a href="#">건강돌보기</a></li> <li><a href="#">더불어살기</a></li> </ul> </nav> </header> <section> <h2>활달한 강아지</h2> <article> <h3>요크셔테리어</h3> <p>생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나 집에 들어온 침입자를 겁내는 일이 없어 좋은 번견이고 우리나라 최고의의 가정견으로 자리 잡고 있다.</p> </article> <article> <h3>말티즈</h3> <p>애정이 많고, 충실하며 활발한 성격을 소유하고있다. 이 종은 1급 가정견으로 요크셔테리어와 함께 우리나라 최고의 가정견으로 자리잡고 있다.</p> </article> <article> <h3>포메라이언</h3> <p>활기차고 명랑한 개로 유명하고, 걷는 모습이 우아하다.충실하고 우호적인 성격이 가장 먼저 거론된다.</p> </article> <article> <h3>골든 리트리버</h3> <p>이 견종은 충성심이 강하고 성격이 활달하여 어린아이나 여성이 상대하기에 적합한 견종이다.참을성 또한 강하여 현재는실내에서도 많이 길러지고 있다.</p> </article> </section> <footer> <p>published by funnycom</p> </footer> </body> </html> | cs |
| 1.기본 설정 (0) | 2019.05.02 |
|---|---|
| [ html css] 기초 태그 (0) | 2018.12.19 |
| margin과 padding의 개념 및 차이점 (0) | 2018.11.21 |
■ 마진과 패딩의 개념
마진: 여백, 여유
패딩: 속을 넣다, 채워 넣다
보더: 경계
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> p{ background : blue; color:white; } </style> </head> <body> <p> welcom to 코딩 독학 </p> <p> welcom to 코딩 독학 </p> </body> </html> | cs |
결과
1 2 3 4 5 6 7 | <style> p{ background : blue; color:white; padding: 50px; } </style> | c메s |
padding 을 50px을 주면?
top, bottom, left, right가 50px가 들어 간다.
1 2 3 4 5 6 7 8 | <style> p{ background : blue; color:white; padding: 50px; margin: 50px; } </style> | cs |
요렇게 적용이 됩니다 :)
※참고
paddding : 0 10 20 30;
paddding : [상] [우] [좌] [하] ;
margin : [상] [우] [좌] [하] ;
| 1.기본 설정 (0) | 2019.05.02 |
|---|---|
| [ html css] 기초 태그 (0) | 2018.12.19 |
| 시맨틱 태그들 (0) | 2018.11.26 |
