[211220] 브라우저의 구성과 html 기초

목차

1.   브라우저의 구성

2.   html의 기초

3.   엘리먼트의 속성과 작성법

4.   엘리먼트의 종류

 

---

 

1. 브라우저의 구성

1-1. 프론트, 백엔드, css

1-2. 인터넷 창을 구성하는 2가지

• 네트워크(주소창)
• 화면을 구성하는 렌더링

1-3. 그렇다면 화면은 어떻게 만드는 것일까?

• 3가지로 이루어진 렌더링 : html, css, 자바스크립트
• 브라우저별로 개별적으로 다른 렌더링.
• 개발자 도구(F12) -> html을 볼 수 있음, 볼 수 있는 위치 지정 가능, 화살표를 누르면 항목별로 알 수 있음.

---

2. html의 기초

2-1. visual studio 작업 환경 만들기

• visual studio 프로그램 설치 -> 확장 탭에서 korean 설치, live server 설치
• visual studio code란?
  • 메모장처럼 텍스트를 저장 가능한 곳은 코드를 실행 가능한 곳.
  • 반복하는 일을 자동으로 완성시켜 작성을 쉽게 해주는 기능을 갖춘 프로그램

새폴더 만들기 / 반복되는 코드를 자동작성해 줌

---

3. 엘리먼트

3-1. 엘리먼트의 속성과 작성법

• 작성 방식 : <엘리먼트>내용</엘리먼트>
• 꺽쇠 안에 들어가는 내용을 통칭해 element라고 한다.
• 특정엘리먼트(속성(디스플레이(인라인/블럭))) -> 속성들은 이런식으로 포함관계이다.
• 엘리먼트가 시작하는 부분에 내용을 넣을 수가 있는데 이것을 주로 속성이라고 한다.
• 속성값 ="내용" / queryString

3-2 엘리먼트의 종류

   1. html 엘리먼트

• 하이퍼 텍스트(뭐시기 링크) 마크업(<>) 랭귀지(언어), 꺽쇠가 존재하는 언어.
• tab키를 눌러서 코드의 가독성을 높여둬야 나중에 안 힘들다

   2. head 엘리먼트

• 내용을 저장하는 공간
• 대표적인 head 엘리먼트 : <title>사이트 이름</title>

 

 3. body 엘리먼트

각 엘리먼트를 다른 효과들 / tab을 이용해서 높인 가독성

• body 영역에서 사용하는 엘리먼트를 많이 알아두어야 html을 잘 사용할 수 있다.
• h1~h6
  • 사이즈별로 제목을 작성할 수 있음
• ul, li
  • 목록 기능을 가지고 있음.
  • li는 바깥을 ul로 묶어줘야 사용이 가능함.
  • html은 책을 읽듯이 왼쪽부터 오른쪽으로 진행하며 한 줄은 사이트 창의 크기를 기준으로 한다.
• div와 span의 차이점 (block 과 inline)

 

 

• 블록속성과 인라인속성의 차이
  • block 속성
    • 한 줄을 다 차지해버림. 옆에 내용이 낄 자리가 없어서 자동적으로 다음줄부터 내용이 입력됨
    • div는 block 속성
  • inline 속성
    • 글자만큼의 크기를 차지해서 옆에 내용이 들어갈 자리가 있다.
    • span은 inline 속성div랑 span의 차이점

• a
  • 앵커 약자, 클릭한 주소로 이동 -> 어떤 주소로 옮길 것이냐. href라는 속성값을 사용해서 이동
  • <a href="주소"></a>
  • href 링크를 거는 속성이고 그 안에 들어간 값이 링크 이동하는 값이다

---

4. input 엘리먼트

• 속성값이 정말 많다. 닫는 태그가 없어도 실행됨

<input type="text" value="" placeholder="아이디를 입력해 주세요.">

• 입력박스를 만드는 type="text"
• 예시를 들어주는 palceholder=""
• 디폴트 값을 적어주는 value=""
• 표준값을 확인할때는 w3c에 들어가서 확인하면 됨. 예전에는 통일되지 않아서 각 브라우저마다 다르게 보였는데 그걸 맞춰주기 위해서 표준개발기구에서 만들어놓은 사이트. 요즘엔 잘 지키고 있어서 그렇게 다르지 않음.
• type = password : 입력한 값을 볼 수 없게 *로 치환.

  • <input type="password"">

• button

• 버튼을 만드는 2가지 방식
  <input type="button" value="버튼">
  <button>버튼</button>
  
  폼 데이터를 전송하는 특별한 버튼
  <input type="submit" value="로그인 제출">

 

• radio box

  • 둘 중에 하나만 선택하는 라디오 박스, 같은 그룹으로 지어줘야함.
    
    <input type="radio" name="gender"> 남자
    <input type="radio" name="gender"> 여자

  • <input type="radio" name="gender" id="man"/> <label for="man">남자</label>
    <input type="radio" name="gender"id="woman" checked="checked"/> <label for="woman">여자</label>

    • 눈이 보이지 않거나 마우스를 움직이기 힘든 사람들을 배려하는 기능. 글씨를 클릭해도 라디오박스가 선택되는 기능.(=웹 접근성), label 엘리먼트를 사용한다.
    • name="gender" -> gender 라는 그룹을 만듬.
    • id = "woman" -> gender 라는 그룹 안에 woman이란 선택지를 만듬
    • label for = "woman" -> 여자 라는 텍스트를 선택하면 woman 이란 선택지를 선택하게 만듬.
• chech box
  • 다중 체크 박스를 만든다 

  • <input type="checkbox" >컴퓨터
    <input type="checkbox" >영화
    <input type="checkbox" >독서
    <input type="checkbox" >운동
    <input type="checkbox" >잠

  • 

    만들어놓은 것들이 전부 한 줄에 있는 것으로 보아 input은 inline 속성임을 알 수 있다.

---

개인 연습 (접은글)

<input type="checkbox" name="fruit" id="watermelon"><label for="watermelon">수박</label>
<input type="checkbox" name="fruit" id="cherry"><label for="cherry">체리</label>
<input type="checkbox" name="fruit" id="apple"><label for="apple">사과</label>
<input type="checkbox" name="fruit" id="pear"><label for="pear">배</label>
<input type="checkbox" name="fruit" id="strawberry"><label for="strawberry">딸기</label>

텍스트를 눌러도 체크가 되는 체크박스

궁금함

1. 이렇게 해보았는데, 만약 그룹이 다르면 선택이 안되나? 그룹을 지칭하는 엘레먼트가 또 있나?
2. 그룹이 다르고 id가 같으면 그룹을 반드시 지칭해줘야겠지? 아닌가 아예 id 이름을 못 붙이나?
3. 실행결과

<input type="checkbox" name="fruit1" id="watermelon"><label for="watermelon">수박</label>
<input type="checkbox" name="fruit1" id="cherry"><label for="cherry">체리</label>

<input type="checkbox" name="fruit2" id="apple"><label for="apple">사과</label>
<input type="checkbox" name="fruit2" id="cherry"><label for="cherry">배</label>
<input type="checkbox" name="fruit2" id="strawberry"><label for="strawberry">딸기</label>

• fruit1그룹 cherry와 fruit2그룹 cherry를 설정했을 경우, '배'를 눌러도 '체리'에 체크표시가 된다.
• 그룹 안에 들어가있는건 소용이 없고 id는 개별적으로 굴러가나보다. 집합(그룹) 안의 원소(id)에 영향을 주지 못한다면 그룹은 뭘 위한거지?
• id가 같을 경우 제일 처음에 선언되었던 id가 기준이 되는 모양.
• 아니면 1번 가정처럼 그룹을 지칭하는 엘레먼트가 따로 있는데 내가 아직 안 배워서 못 적어서 그런건가?