-------------------------------------------------------------------------------

★ Hello World! 안녕하세요! 신재구입니다! ★

♬ 즐겁게 코딩하고 꿈꾸는 프로그래머가 됩시다! ♬

☞ 불편사항 및 정오표 제보 : worntls94@gmail.com

홈으로

-------------------------------------------------------------------------------

◆ 코드하우스 수업 필기 정리본 ◆

▷ 모든 코드는 크롬환경에서 F12를 누르면 확인 가능합니다 ◁



-------------------------------------------------------------------------------

※ HTML 기본 태그 ※

ㄴ 1째주 강의 정리 - 태그 정리.pdf
ㄴ 4장 HTML 태그 정리.pdf
ㄴ 5장 폼에서 사용하는 태그.pdf

* ! - html 기본 셋팅

< !DOCTYPE html >
    < html lang="ko" >
        < head >
            < mata charset = "UTF-8" > < /mata >
            < title >첫 번째 문서 연습 < /title >
            < link rel="stylesheet" href="css/poster.css" > // CSS링크 //
        < /head >

         < body >

         < /body >

    < /html >


* abbr : 줄임말 표시

ex) IoT


* h1 ~ h6

ex)

『H1

H2

H3

H4

H5
H6 』

*code : 컴퓨터 인식을 위한 소스코드

ex) function savetheLocal()


* small : 부가 정보처럼 작게 표시

ex) (부가세 별도)


* sub : 아랫첨자

ex) H2O


* sup : 윗첨자

ex) E = mc2


* u : 텍스트에 단순 밑줄 긋기

ex) 텍스트에 단순 밑줄 긋기


* ins : 공동 작업 문서에서 새로운 내용을 삽입

ex) 새로운 내용을 삽입합니다.


* del : 기존내용 삭제, 가운데 줄 긋기

ex) 기존 내용을 삭제합니다.


* s : 단순 가운데 줄 긋기

ex) 34,000원 -> 19,000원


* ol : 순서가 있는 리스트

ㄴ속성
ㄴ type
ㄴ start
ex)순서목록


* ul : 순서가 없는 리스트

ex)순서목록


* dl dt dd

ex) 상품 구성

선물용 3kg
소과 13~16과
중과 10~12과
선물용 5kg
중과 15~19과


* 특수문자 이용하기

ex)
코드 표현 문자 용도



* 파일불러오기 - 경로지정

./ : 현재위치
/ : 하위경로로
../ : 상위경로로

ex) img src="./img/salad.jpg" alt=""


* href, scr, url, rel 구분

- href :

ㄴ link 태그로 외부 CSS 파일을 불러올 때 사용
ㄴ a 태그에 홈페이지 등의 주소를 입힐 때 사용
ex) a href="https://www.google.com/"

- src :

ㄴ script 태그로 외부 JS 파일을 불러올 때 사용
ㄴ img 태그에 파일 디렉토리 경로의 특정 이미지를 지정할 때 사용
ex) img src="../images/google.png"/

- url( )

ㄴ CSS 코드 또는 HTML의 style 에서 특정 파일을 불러올 때 사용
ex) background-image: url("../images/google.png");
div id="g" style="background-image: url(../images/google.png);"

- rel

ㄴ link 태그의 rel 속성은 현재 문서와 외부 리소스 사이의 연관 관계를 명시합니다.
ex)link rel="stylesheet" href="css/style.css"



* 이미지 크기조절

ㄴ %는 화면 크기에 따라 지정, 속성에서 원본 px확인 가능

ex)

width="100%"

width="50%"

width="150px"





* object, audio, video, embed 미디어 삽입

ex)
embed 방식
이미지 PDF
오디오 동영상

audio, video, object, img 방식
이미지 PDF
오디오 - controls, autoplay, loop 동영상 - controls autoplay muted loop


* 주석처리

ㄴ Ctrl + /


* a - 하이퍼링크

ㄴ tatget 사용시 열림 설정 가능

ex) a href="https://www.naver.com/" target="_blank"
네이버


* span

ㄴ 성질 없다
ㄴ id, class 부여 등에 사용


*

ex)


---------------------------------------------------------------------------------------------------------------------------------

↑top↑

※ 순서 목록 ※

● ol

○ type 1

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ type A

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ type a

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ type I

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ type i

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ Start 속성

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ reversed 속성

  1. 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  2. 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  3. 드레싱 재료를 믹서에 갈아줍니다.
  4. 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

↑top↑

● ul

○ disc 속성

  • 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  • 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  • 드레싱 재료를 믹서에 갈아줍니다.
  • 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ circle 속성

  • 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  • 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  • 드레싱 재료를 믹서에 갈아줍니다.
  • 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ square 속성

  • 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  • 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  • 드레싱 재료를 믹서에 갈아줍니다.
  • 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

○ none 속성

  • 샐러드 채소를 씻고 물기를 제거한 후 준비합니다.
  • 레드향과 아보카도, 토마토를 먹기 좋은 크기를 썰어둡니다.
  • 드레싱 재료를 믹서에 갈아줍니다.
  • 볼에 샐러드 채소와 썰어 둔 레드향, 아보카도, 토마토를 넣고 드레싱을 뿌리면 끝!

↑top↑


---------------------------------------------------------------------------------------------------------------------------------

※ 폼 만들기 ※

● form

- method 속성
ㄴ get 방식 : 주소창에 드러난다. 검색이 속도가 빠르다. 길이제한.
ㄴ post 방식 : 입력한 것이 드러나지 않는다. 암호화 되서 속도가 느리다. 길이제한 없다.

- name 속성
ㄴ 폼 제어를 위한 폼의 이름 지정

- action 속성
ㄴ 폼 태그 안의 내용을 처리해 줄 서버 프로그램을 지정합니다.

- target 속성
ㄴ현재 창이 아닌 다른 위치에서 열도록 합니다.

- autocomplete="off"
ㄴ 자동완성 기능 끄기


* fieldset : 폼 요소를 그룹으로 묶는 태그


* legend : 그룹으로 묶는 구역에 제목을 붙이는 태그

ex)
로그인


* label

ㄴ input 태그 같은 폼 요소에 레이블을 붙일 때 사용
ㄴ input을 감싸야 한다. or for id로 지정해준다

ex)





* input 기능들

- input 태그 모음
- form 태그 모음

ㄴ 패스워드는 value 설정 안됨
ㄴ size는 입력문자 길이
ㄴ value : 텍스트 필드 부분에 보여지는 내용
ㄴ radio는 동일한 name 설정해야 하나만 선택됨
ㄴ
ex)

회원 가입을 환영합니다

사용자 정보

autofocus

placeholder

readonly

required

textarea

사용자 정보

radio 버튼

checkbox 버튼

주문할 상품을 선택해 주세요


포장 선택


number 타입

range 타입

date, month, week, time, datetime-local 타입

날짜 지정하기

시간 지정하기

범위 제한하기




image 타입

button 타입

file 타입

hidden

select

기본 select

select multiple

select selected

select size

select optgroup




datalist

button

button







*

ex)


↑top↑


---------------------------------------------------------------------------------------------------------------------------------

※ table ※


* table tr th td

ex)
caption
th th th th
td td td td
가정용 5kg 18~26과 47,000원


* thead tbody 영역지정

ex)
caption
thead
tbody td td td
가정용 5kg 18~26과 47,000원


* rowspan colspan

ex)
rowspan 이름                  
학과/학번
연락처
지원분야 colspan



* 테이블 꾸미기

ex)
- 적용속성
border="1"
bordercolor="orange"
bgcolor="black"
align="center"
style="color: white;"
width="150px", height="150px"

  rowspan   이름
학과/학번
연락처
지원분야 colspan



* css활용해서 표 꾸미기




* colgroup col

ex) colgroup선언 순서대로 적용된다. 각 그룹은 col 명령어로 style적용한다.

선물용과 가정용 상품 구성
용도 중량 개수 가격
선물용
가정용



ex) colgroup은 정렬이 안되므로 각 tr에 align 적용

먹거리
입춘 천냥 국수 11:00 ~ 16:00 목관아 주차장
제주 향토 음식 10:30 ~ 17:00 관덕정 마당
입춘 주전부리 10:30 ~ 17:00 관덕정 마당
차 나눔 10:32 ~ 17:00 관덕정 마당



↑top↑

※ 종합 html 실습 ※


프런트엔드 개발자 지원서

HTML, CSS, 자바스크립트의 기술을 이해하고 실무 경험이 있는 분을 찾습니다.

개인 정보


지원 분야


지원 동기

↑top↑

top