2021. 6. 27. 03:34ㆍ스터디/Coding
이는 생활코딩()을 개인 공부목적으로 메모한 글입니다.
https://opentutorials.org/course/1
생활코딩
hello world 생활코딩의 세계에 오신 것을 환영합니다. 생활코딩은 일반인들에게 프로그래밍을 알려주는 무료 온라인, 오프라인 수업입니다. 어떻게 공부할 것인가를 생각해보기 전에 왜 프로그
opentutorials.org
HTML 코딩 실습 환경 준비
코딩을 하기 위해, 웹브라우저 + 코드 편집기 필요.
현시점 최신 에디터는? "best HTML Editor 2021" 검색
아톰 설치 중...
> 저장할 폴더부터 선택/생성 후 html 파일 생성 시작.
Atom으로 크롬에 결과 페이지 여는 법
- chrome에 ctrl+O
- 만들어 둔 html 파일 클릭
- 코드를 입력하고 결과를 확인할 때마다 새로고침으로 확인한다.
기본 문법 태그 TAG </>
<strong> : 강조
<u> : 밑줄
<h1> ~ <h6> : html headings (7 이상은 없다.)
줄 바꿈 태그
<br> : 줄 바꿈.
<p> : paragraph 단락
- 단점: 여백이 정해져 있어 여백을 자유롭게 다룰 수 없음.
ㄴCSS로 조절 가능 <p style="margin-top:40px;">
- 단락의 마진 윗부분을 40px로 지정하겠다는 뜻.
이미지 삽입
<img> : image 이미지
그럼 이미지를 어디서 불러올까?
"source" or "src" 사용해 링크를 걸어준다.
<img src="https://images.unsplash.com/photo-1478749485505-2a903a729c63?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
<--! 이미지의 링크는 인터넷 연결로 이미지를 불러올 때 사용. -->
컴퓨터에 저장된 이미지를 사용하려면?
<img src="저장된 파일 이름">
<--! 반드시, html 파일과 이미지 파일이 같은 폴더 안에 들어야 불러올 수 있다.. -->
CSS 속성(attribute) 붙이기
style로 CSS를 코드를 이용해 지정할 수 있고, 묶여 있는 속성(attribute)들의 순서는 상관이 없이 사용할 수 있다.
<img style="height: 300px; width: 500px; padding: 10px;" src="https://images.unsplash.com/photo-1478749485505-2a903a729c63?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80">
목차만들기 <li>
하나하나 만들지 않을 수 있는 방법
<ol> : ordered list 순서대로 목차
<ul> : unordered list 순서없이 목차
<ol> / <ul> 안에는 개별 리스트 태그<li>가 따라다닌다.
표를 넣는 <table>
table의 짝꿍
<tr> : 가로(행)
<td> : 세로(열)
본문을 설명하는 <head>
많아진 정보를 잘 정리하기 위한 구조 설계
html 문서 구조
많아진 정보를 잘 정리하기 위한 구조 설계
본문을 설명하는 <head>
- <title> : 페이지명(파일명)
- <meta charset="utf-8"> : "character set"의 약자 즉, "utf-8 형식으로 파일을 읽어라."
본문의 시작 <body>
헤드와 본문을 감싸는 <html>
<!doctype html> : 이 문서는 html이다. (관용적 표현)
<!doctype html>
<html>
<head>
<title>원하는 타이틀 네임</title>
<meta charset="utf-8">
</head>
<body>
</body>
태그의 제왕, 링크를 거는 <a>
<a> : anchor 버튼에서 페이지로 닻을 내려 도달하게 한다.
그럼 어디로 보낼까요? 그건 "속성"으로
- <a href="~~~~보낼 링크주소~~~~"></a>
- href? Hypertext Reference
새 탭으로 열고 싶다면? 속성 추가!
- target="_blank"
이건 화면에 안보이게 표시할거야. 주석달기
/* 여기에 들어있으면 안보이지롱 */
<--! 여기도 안보이지롱 -->
'스터디 > Coding' 카테고리의 다른 글
| 개자이너 되기 프로젝트... (0) | 2021.08.04 |
|---|---|
| 웹/앱 디자인의 단위 개념 총정리 (0) | 2021.07.18 |
| 기본 HTML 문서 형식의 완성 (0) | 2021.07.13 |
| 생활코딩 WEB2 - CSS 01 ~ 10 (0) | 2021.07.13 |
| WEB1 - 웹 16 ~ 18 (0) | 2021.06.27 |