HTML,CSS - HTML Study

1. 웹문서

0) 들어가기전, 마크다운 문법 에러 정리

제목을 지정하기 위해서 #을 써주는데 # 앞에는 빈 공백이 없어야 동작한다.
왠만하면, []를 쓰지 않는다. 다른 값으로 인식되는 경우가 많다.
줄바꾸기를 위해서는
를 쓰는 것이 확실하다.
코드블럭을 표시하기 위한 백틱(```) 앞에도 공백이 없어야 한다. 백틱 구간 안에서만 탭으로 띄울 수 있어야 한다.
- ex)

	<script>
	
	</script>

1) 문서의 구성요소 파악

우리는 문서에서 제목(h), 문장(p), 목록(ul), 표(table), 입력폼(form)을 구분할 줄 알아야 한다. 또한, 사진(img), 하이퍼텍스트(a)을 구분할 줄 알아야 한다.
레퍼런스 참고시, 원어로된 것 읽기

2) html 요소 파악

A. head 태그 : meta 태그, title 태그

B. body 태그

a. 제목 : h 태그

b. 목록 :

  - ul 태그(목록이 정렬되지 않는 경우, 목록의 항목은 불릿(•)으로 표시) 
  - ol 태그(의미를 부여해서 목록이 정렬되는 부분, 목록의 항목을 숫자(1, 2, 3)로 표시) 
  - dl 태그(정의하고 설명하는 부분을 따로 구현 - dt 태그와 dd태그가 이용된다.)
  - 정리 : ul태그와 ol태그는 li태그를 자식으로 받아야 한다.

c. 문장 :

- div 태그(문장들을 묶어줄 때, form 태그와 달리 의미가 없는 경우 목적을 모를 때는 div 태그로 묵어준다.) 
- p 태그(문장(li)들을 묶어줄때 이용)
- li 태그

##### d. 표 : - table 태그 : 테이블을 만들 때 사용(보통 table 태그에는 데이터를 정리하기 위한 값이 들어가고 웹을 구성하거나 배치하기 위해서는 div 태그를 이용한다.) - tr 태그 : table row로서 가로줄을 만드는 역할(행) - td 태그 : table data로서 셀을 만드는 역할

- form 태그 참고 블로그(https://inpa.tistory.com/entry/HTML-%F0%9F%93%9A-%ED%8F%BCForm-%ED%83%9C%EA%B7%B8-%EC%A0%95%EB%A6%AC) 
- 입력 폼(form 태그) : 웹사이트에 데이터를 전송하기 위해서 사용
  - method : 전송 방식 설정 (get, post)
  - name   : form의 이름 설정(서버로 제출된 폼 데이터를 참조하기 위해서 사용, key와 같은 역할)
  - action : 전송되는 서버 url 또는 html 태그
  - target : action에서 지정한 script 파일을 현재 창이 아닌 다른 위치에 열도록 지정 
  - autocomplete : 자동완성 기능을 설정(이전의 입력된 데이터를 기반으로 설정- on/off로 설정)
  - enctype : 폼 데이터가 서버에 제출될 때, 인코딩 타입으로서 방법을 알려준다.
    - ex) 기본값 이외에 multipart/form-data : 모든 문자를 인코딩하지 않음을 명시하고 <form> 요소가 파일이나 이미지를 서버로 전송할 때, 사용한다.
    - ex)  text/plain, application/x-www-form-urlencoded 기본값 등이 있다.
  - novalidate	: form data를 서버로 제출할 때, 해당 데이터의 유효성을 검사하지 않는다는 것을 설정.

e. 표를 위한 form 내부의 태그와 속성들:

- <input> : 
- <input type> 속성(<input>의) :
  - <textarea> : textarea 요소는 input 요소의 "text" 타입과 비슷한 형태이다. 하지만 "text" 타입의 input 요소는 한 줄만 입력이 가능하지만, <textarea> 태그는 긴 내용을 입력하는 것이 가능하다.

<br>
  - <label> : 
    - input 태그를 제어하여 상태값을 변경하도록 돕는다.
    - 체크박스를 예로 들자면, 클릭 영역이 단순 체크박스 영역에 국한된 것이 아니라 체크박스가 가리키는 툴팁영역에도 클릭시 input 태그가 함께 체크될 수 있다.

    ```html
        <label for="fruitItem">여기를 클릭</label>
        <input id="fruitItem" type="checkbox" />
    ```

  - ​위 코드는 label 태그안의 영역을 클릭할 경우 for 속성이 지정된 fruititem 이라는 id 값을 찾는다. 즉 아래의 input 태그가 원격으로, 자동으로 클릭한 것과 같이 동작하게 된다

<br>
  - <select> & <option> : 
    - 드롭메뉴에서 선택을 할 수 있는 태그. 
    - <option> 태그에서 사용하는 value 속성은 텍스트 필드에서의 value 속성과는 조금 틀리다. 
    - 텍스트 필드에서 value 속성에 값을 입력하면 기본값이 입력되지만 <option> 태그의 경우는 이 <option>이 선택된 경우 전송되는 값을 지정하는 것이다.

  - <datalist> : select는 선택만 할 수 있는 반면, datalist는 리스트에서 어느 한가지를 선택하거나 키워드에 입력할 수 있다.

  - <feildset> : 관련된 입력 양식들을 그룹화할 때 사용

  - <legend> : fieldset 태그 내에서 사용되야 하며 그룹화된 fieldset의 제목을 정의
  - <button> : form 요소중 하나, 페이지에 버튼을 넣고 form을 전송하거나 reset 할 때 사용한다. <br>		 ##### f. <button>와 <input>의 주의 사항
 	
- <button>와 <input>의 차이점 

- <input> 태그는 종료태그 없이 type 속성 이용해 버튼에 글자나 이미지 넣지만, <button> 태그는 시작태그와 종료태그 사이에 글자나 이미지 넣음​

- 항상 <button> 태그의 type 속성을 명시해줘야 함. 왜냐하면, IE(=익스플로러) 경우 기본 타입이 button 이나, 타 브라우저 경우 기본 타입이 submit 이기 때문.

- <form> 태그 안에서 버튼 만들 땐, 반드시 <input> 태그 이용해 버튼 만들어야 함. 왜냐하면, 타 브라우저가 <button>태그의 속성값을 전송하는 반면, IE는 시작태그와 종료태그 사이의 텍스트나 이미지 전송하기 때문.

3) html 강의 요약 내용 정리

목록을 ul 태그 하위 목록에서 목록을 1개를 한 번에 만들어 준다.

ul>li

<ul>
	<li></li>
</ul>

목록을 ul 태그 하위 목록에서 목록을 3개를 한 번에 만들어 준다.

ul>li*3

<ul>
	<li></li>
	<li></li>
	<li></li>
</ul>

크롬의 web store에서 설치할 것 :
- outliner
- web developer
header 영역에는 제목을 포함하는 다른 콘텐츠도 포함할 수 있다.
div 태그는 제목과 콘텐츠를 묶어주는 역할을 해준다.

4) section 태그 정리

section 태그 조건
- 제목과 내용(콘텐츠)은 항상 포함되어야 한다.
시멘틱 section 개념(section에 포함되고 main은 body에만 존재한다.)
- article : header, footer, main(X)
- aside : header, footer, main(X)
- nav : header(X), footer(X), main(X)
- body : header, footer, main(O)
section의 부분(영역)을 만드는 태그(section에 포함되지 않는다!! 중요!!)
- section의 영역을 위해서 초기에는 div 태그가 사용되었다.
- 이후에는 의미를 부여하기 위해서 다음과 같은 영역 태그가 추가 되었다.
  - header
  - main
  - footer
article에는 contents가 무조건 필요하다.(제목은 덤이다.)
nav 태그는 제목도 컨턴츠도 아닌 네비게이션을 위한 목록을 의미한다. 따라서, header(X), footer(X), main(X) 이러한 구성을 가진다.

5) 인라인 태그 종류(MDN에서 찾아보기)

a 태그 : 하이퍼텍스트로 href 속성으로 url 연결
b 태그 : 텍스트를 bold체로 작성
i 태그 : 텍스트를 이텔릭체로 작성
u 태그 : 텍스트에 underline을 추가하여 작성
span 태그 : 보통 css에서 많이 사용한다. 강제적으로 범용적 사용가능하다.

6) 인라인 태그 개념

블록 태그의 크기는 자신의 영역을 가지고 있고 인라인 태그의 크기는 컨텐츠의 크기가 자신의 크기가 됨.
블록, 제목, 목록 스타일의 블록들은 차지하는 영역에서 차이가 있다.

7) 인라인 태그 분류

의미를 부여하는 태그, 스타일을 위주로 하는 태그, Form 관련 태그, 콘텐츠 관련 태그, 멀티미디어 API 등이 있다.
Form 관련 태그, 콘텐츠 관련 태그, 멀티미디어 API은 콘텐츠가 결합된 인라인 태그이다.

8) 라인 태그 학습을 위한 파일 준비

a 태그는 Achor에서 의미를 가져왔다. 보통 href 속성으로 url을 가져온다.

9) 상대경로와 절대경로

a. 상대경로
- 보통 프로젝트 단위의 상대경로를 많이 사용한다.
- ./이나 ../처럼 상대 경로의 가장 앞에 적어주며 보통 생략이 가능하다.
- ./는 해당 경로에서 바로 위의 경로, ../는 해당 경로에서 위의 위의 경로이다.
b. 절대경로
- root로 시작하는 경로이며, 프로젝트의 구조가 변경되면, 사용할 수 없다.
- 그래서 보통 상대경로를 사용한다.

10) A태그의 target 속성

a 태그의 속성 중에서 href를 가장 많이 사용한다.
a 태그의 target 속성에서 _self 속성은 기본값이 현재 href에 저장된 현재 경로를 의미한다.
a 태그의 _blank라는 속성은 웹 페이지에서 해당 a 태그가 설정된 하이퍼텍스트를 클릭하면, 이동되는 새로운 페이지가 새로운 탭에서 열린다.
웹 페이지 문서는 기본적으로 header, footer, main, aside 등등 여러 개의 문서를 합쳐서 하나의 문서로 만들어서 클라이언트에게 보여준다.

11) u,i,b 태그

css의 등장으로 u,i,b 태그의 의미는 예전과는 많이 달라졌다. 최근에는 기능적인 것보다는 의미를 부여해주는 측면이 크다.
인용구를 가져왔다던지 의미를 명확하게 한다던지 등의 의미를 최근에는 부여해서 사용한다.
추가로 <br> 태그는 웹 문서에서 줄을 바꿔주는 역할을 한다.

12) img 태그

src 속성 :
- img 태그의 가장 대표적인 속성은 src이다.
- src 속성은 웹에서 보여주고 싶은 image를 가져오기 위해 프로젝트 파일에서 저장된 이미지를 저장 경로로 설정한다.
- 즉, img 태그의 src 속성에서 해당 경로를 설정하여 image를 가져온다.
- <img src="image/17.jpg">
- 보통 상대경로를 사용한다.
alt 속성 : 이미지가 버그가 걸려서 이미지를 웹에서 볼 수 없을 때, 이미지가 어떤 이미지인지 설명해줄 수 있는 메세지이다. <img alt="아메리카노">
height 속성 : 이미지의 크기를 설정할 수 있는 속성이다. <img height="100">

13) 인라인 태그의 변화

예전의 웹 문서는 콘텐츠, 구조, 스타일로 구성되어 있지만 최근엔 스타일 부분을 html이 아니라 css에서 담당한다.
그래서, html의 기존 스타일 태그를 제거하고 새로운 스타일 언어인 css로 대체되었다.
또한, 중복되거나 의미가 모호한 태그를 제거했다.
따라서, 미래의 웹 문서는 기본적인 스타일을 위한 태그가 아니라 콘텐츠르 구분하기 위한 태그로의 변화가 필요하다.

14) 인라인 태그들의 의미

이제는 기존의 스타일을 위해 사용되던 태그의 용도를 변경해서 사용한다.
- u,i,b,em,strong 태그 등이 있다.
- <b>와 <em> 그리고 <strong> 태그로 이동할수록 강조해주는 의미가 강력해진다.
<s>와 <del> 태그에서 <del> 태그는 텍스트를 기본적으로 삭제하지만 <s> 태그는 원래 삭제되어 있던 텍스트이고 다른 값으로 바꿔줄 때 사용한다.(ex) 할인 가격에서)
<wbr> 태그는 <br>과 비교했을 때, 같은 줄에서 쓰인 단어가 길어지면 알아서 의미적으로 판단하기 쉽게 남은 텍스트 위치를 파악하여 줄바꾸기를 해준다.
추가적으로 <kbd> 태그는 기술적인 글에서 키보드키를 보여줘야해서 필요로할 때, 사용한다.
<var> 태그는 어떤 문자를 그대로 보여주어야할 때, 사용한다. 보통 수식에서 많이 사용한다.
<span> 태그는 사실 의미는 무시하고 스타일만을 위한 인라인 태그이며 범용적으로 사용할 수 있다.(중요! 보통 css에서 많이 사용한다.)

15) 그 외의 인라인 태그

<sup>와 <sub>태그는 보통 수식에서 많이 사용한다. 수식에서 첨자를 사용할 때, 이용한다.
<bdi> 태그는 나라마다 문장을 쓰는 방향이 다르므로 그것을 설정해 줄 수 있다.(우리나라는 왼쪽에서 오른쪽으로 사용한다.)

16) form 태그와 submit

<form action="signup"></form>
- action 속성은 해당 url로 이동한다.
<input type="submit" value="회원가입">
- input은 종료 태그가 없다. type을 설정해주어야 한다.

17) Basic Form 태그

label 태그는 form 태그에서 어떤 내용을 입력할지 명시화 해준다.
fieldset 태그는 form 태그 내부에서 내용들을 묶어줄 때, 이용한다.
fieldset의 이름을 명시화해줄 때, legend 태그를 이용한다.
label은 input 태그의 id에서 넘겨받아서 이용하는데 label의 for 속성을 이용한다.
```
      <label for="uid">아이디</label>
      <input id="uid" name="uid">
```
- input 태그는 name으로 식별한다.

18) Radio 버튼

	<fieldset>
		<legend>가장 좋아하는 취미</legend>
		
		<input type="radio" id="r" name="hb">
		<label for="r">독서</label>
		
		<input type="radio" name="hb">
		<label>등산</label>
		
		<input type="radio" name="fb">
		<label>축구시청</label>
		
	</fieldset>

input 태그의 속성 중 type은 radio이고 id로 radio 버튼 각각을 식별해주며 name 속성으로 radio 버튼들을 묶어줄 수 있다.
따라서, 위의 코드처럼 작성하면, 독서와 등산 버튼은 동시에 누를 수 없다.

2. html 실습 코드

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <h1>부안에 오면 꼭! 들리는 카페</h1>

    <div>전체메뉴</div>

    딸기청
    알랜드 아메리카노
    
    버터쿠키
    
    <div>알랜드 오시는 길</div>
    
    <div>
        <div>과일청</div>
        <h4>직접 만든 과일청을 맛보세요</h4>
        
        <p>
            신선한 과일과 알랜드만의 레시피로
            과일향의 풍미를 충분히 느낄 수 있는
            수제청을 드셔보세요.
        </p>
    </div>

    <div>
        <div>쿠키</div>
        <h4>직접 구운 수제 쿠키를 만나보세요</h4>

        <p>
            신선한 버터 그리고 견과류를
            이용해 바삭함을 더해 매일마다
            직접 구운 맛난 쿠키를 만나보세요
        </p>
    </div>

    <div>
        <div>커피</div>
        <h4>다양한 로스팅으로 다채로운 맛을 느껴보세요</h4>

        <p>
            콜롬비아산의 상큼한 맛, 과테말라산의 풍미,
            그 외에 5가지 이상의 다채로운 원두의 맛을 느껴보세요.
        </p>
    </div>

    <div>
        <div>주변명소</div>
        <h4>알랜드 주변의 명소를 찾아보세요.</h4>

        <p>
            알랜드 주변에는 30곳이 넘는 힐링 장소에서 맛나는 커피와 경치로 힐링을 해보세요!
            !!
        </p>
    </div>

</body>
</html>

3. html 실습 코드(추가)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <header>

    </header>

    <section>
        <h1>회원가입</h1>
        <form action="signup">

            <fieldset>
                <!-- filedset으로 묶어주고 그안에서 legend로 필드셋의 이름을 붙여준다! -->
                <legend>회원가입 정보</legend>
                <!-- 회원가입 내용이 한줄로 길게 나와서 div로 묶어주자! -->
                <div>
                    <label for="uid">아이디</label>
                    <input id="uid" name="uid">
                    <!-- 여기선 input의 id가 label의 for와 연결이되며 input의 name은 나중에 백엔드에서 식별된다. -->
                    <output>유효한 아이디입니다.</output>
                </div>

                <div>
                    <label for="email">이메일</label>
                    <input id="email" name="email">
                    <output>유효한 아이디입니다.</output>
                </div>

                <div>
                    <label for="pwd">비밀번호</label>
                    <input id="pwd" name="pwd">
                    <output>유효한 아이디입니다.</output>
                </div>
                
                <div>
                    <label>비밀번호 확인</label>
                    <input>
                    <output>유효한 아이디입니다.</output>
                </div>
            
                
            </fieldset>
            <fieldset>
                <!-- value는 나중에 식별자로 -->
                <legend>가장 좋아하는 취미</legend>
                <input type="radio" name="hb" value="1">
                <label>축구</label>
                <input type="radio" name="hb" value="2">
                <label>농구</label>
                <input type="radio" name="hb" value="3">
                <label>배구</label>

                <input type="text" name="hb2" list="hb2-li">
                <datalist id="hb2-li">
                    <option value="여행">
                    <option value="여의봉가지고놀기">
                    <option value="여의돟나강공원">
                    <option value="여의도한강공원">
                </datalist>
            </fieldset>

            <div>
                <input type="submit" value="회원가입">
            </div>
        </form>

    </section>
    
</body>
</html>

2. css

마진은 top에 주는 것이 좋다. 아래 객체들이 영향을 받기 때문이다.
pseudo 코드 : hover 클릭했던지 마우스 포인터에 따라 색깔을 바꿀 수 있다.
기능 하나만 잡아서 figma페이지 그리기 (모바일 )
html 파일 구조 생각해보기 (물리 아키텍쳐)
역할자 행위 가능

이전TIL-5주차 코드 - Day1~3

다음TIL-5주차 코드 - Day4~5