배움 __IL/addtionalFrontEnd

TIL : 웹퍼블리싱 HTML 4회 (8,9)

Mo_bi!e 2023. 1. 7. 17:41

I.  인라인 태그 학습하기 (8)

1. u,i,b 태그 (30)

(1) u태그

말 그대로 underLine 으로 하는 것이다.

이렇게 스타일을 꾸며주는 태그가 없어질거같지만 안없어지고있음, 왜냐하면 경고로 있음 CSS로 충분히 스타일을 줄수가 있다.

 

사실 태그로 스타일주는것이 바람직하지는 않다.

 

(2) i 태그

이탤릭체인데, 이것도 CSS로 줄수도있다.

나중에 다른태그와 비교할때 화면에 보여주기위한 스타일로 하지말고, 의미로 표현하기 위해서 쓰는것을 권하는 편이다

최초 CSS없던 시절의 취지와 달라졌다

 

(3) u태그

언더라인이다.

이것도 마찬가지이다.

 

(4) b태그

얘는 bold이다. 그런데 html의 의미를 html5에서는 다르다

 

즉 CSS에 있는것을 두고 이후 얘는 의미로서 보자라고한다.

 

(5) br

인라인에서 내려쓰고싶을 때 쓴다. break 즉 라인을 끊어주는 것이다.

 

2. img 태그 (31)

(1) 딸기청 이미지를 넣자

1)

이미지는 자체가 컨텐츠여서 넓이 높이를 가지고있다.

경로를 잘 설정해서 넣어주면된다

 

2)

<img src = "./------">

를 해준다 

 

3)

나중에 CSS를 배우면 크기를 줄일수도있으나, 지금은 그냥 해본다.

높이 조절도 가능하다

 

4) 

<li><a target="_blank" href="./menu/detail.html"><img height="100" src="./images/ddal.jpeg" alt="딸기청"></li></a>

그러나 이미지 이용상태가 불능인경우를 대비해서 대체 텍스트 (alt)를 넣어주여야한다.

 

5) 나머지 딸기청 알랜드 아메리카노들을해보자

<nav>
    <h1>인기메뉴</h1>

            <li><a target="_blank" href="./menu/detail.html"><img height="100" src="./images/ddal.jpeg" alt="딸기청"></a></li>
            <li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="알랜드"></a></li>

            <li><a href="./menu/detail.html"><img height="100", src="./images/ddal.jpeg" alt="아메리카노"></a> </li>

</nav>

 

6)

span은 여러개 묶어야할 때 인라인계의 div태그로 볼 수있다.

 

3. 인라인 태그의 변화(32)

이전에 인라인 태그 최초의 취지에서 바뀌었다고 하는데 무엇이 바뀌었는지 알아보자

 

(1) 웹문서란

문서는 컨텐트 구조 스타일 3가지가 구성하고있다.

엄밀히 보면 서식이 존재하는 문서의 경우 3가지를 가진다.

 

컨텐트는 텍스트인데, 구조가 마크업한다.

구조가 구분짓고 무엇을 가지고있는 녀석을 보고있다

마크업은 이녀석이 무엇인지 설명해주기 위해서 있다.

얘는 목록이다, 제목이다 설명해주는것이다.

 

스타일은 별도로 있는것인데, HTML은 스타일을 주는 것이 태생적으로 없다.

최근들어 CSS때문에 구조에다가 꾸밀수있는 능력이 포함되었다

그전에는 폰트, 종류, 색 표현이 가능하긴했으나, 스타일 주는게 별도로 있는게 아니라 구조를 나타내주는 태그 중에서 스타일을 위한 태그가 있었다.

 

대표적으로 u,i,b태그등이 있었다. 이제 CSS때문에 스타일을 위주로 하는 태그는 존재할 필요가 없어졌다

 

(2) 태그의 제거 또는 수정

1) 스타일 태그의 제거하고 스타일언어(CSS)로 대체

 

2) 중복되거나 의미가 모호한 태그의 제거

 

 

(3) 시맨틱을 지원하는 웹의 모양 : 데이터 자동 추출문서로써의 변화

기존웹은 사람이 문서를 보고, 사람은 문서를 보고 색 배치등을 보고 제목 목록을 알수있다.

 

미래에는 문서가 사람뿐만아니라, 사람,냉장고,등이 대신 읽어주는것이다

날씨도 대신읽어주기 등

따라서 문서의 구조가 컴퓨터가 이해할수있게끔 해야한다

 

(4) 웹 문서 변화의 필요성 : 스타일을 위한 태그가 아니라 컨텐츠를 구분하기 위한 태그로의 변화의 필요성

좀 더 극단적으로 보면 좌측의 경우에는 사람은 이해할수있다,

우측처럼 문서가 만들어지면 구조만 보고 스타일은 걷어내고 어떤게 포함되어있는지, 문서를 의미론적으로 접근이 가능하다

HTML은 우측처럼 가고있다. 결국 스타일은 구조에 포함안되는게 바람직할 수있다

스타일은 제거하고 의미만 부여하자, 설사 스타일로 태어났지만 의미로서 충분하다면 존치시킬 수있다. 

 

앞으로 다룰 인라인 태그도 의미를 가지고 하는것이 바람직할수도있다.

 

4.  인라인 태그들의 의미(33)

(1) 스타일을 위해 사용되던 태그의 용도를 변경

 

1)

u i b는 원래 스타일을 위했다. 그러나 ... 어떻게 살아남았을까?

 

u는 컨텐트 중에 내용이 불분명한것을 감싸주는 역할을 할 수있다. 

i는 컨탠트 중에 관용구로 해주는 역할을 한다

 

b는 컨텐트 중에 주목을 끌기위한 역할을 한다.

 

다만 모양으로 태그를 쓰는것이 아닌데, 비슷한 모양을 가지는것이 <em> <strong> 이 있다

우리는!! 모양으로 포커스 두지말고 의미로 보자

em 은 컨텐트 중에 강조를 할때는 이것을 쓰고

strong 컨탠트 중에 중요, 위급할 때 이것을 쓴다

 

이 세개가 헷갈릴수있는데.. 강도의 차이로 볼수있다

b > em > strong

순서로 볼 수있다

 

2)

s 와 del은 모양은 동일하다

del 은 앞으로 지워질 것을 의미하고

s는 이미 지워진 것을 의미한다.

 

예컨데 쇼핑몰 이전, 현재 가격에서 이전가격 s로 표현이 가능하다

사실 너무 엄밀할 필요는 없을 수있다.

 

3)

br 은 linebreak

wbr 은 word break

 

이다 br은 차치하고, wbr 은 내려쓰기를 할때 긴 단어의 의미를 살아있게끔 해서 라인을 내려주는 것이다

만약 <wbr> 을 했다고 하더라도 아직 공간이 여유로우면 내려쓰기 하지 않을수도있다 

 

4)

<kbd> 키보드 관련

<code> 코드 관련

<var > 변수 관련

 

문서에다가 키보드,코드,변수 정보를 표현하고 싶을 때이지 꼭은 아니다.

 

(2) 사실 의미는 무시하고 스타일만을 위한 인라인 태그가 필요하다면

 

<span>은 내가 범용적으로 그냥 스타일을 주기 위해서 쓴다

 

5. 그 외 인라인 태그 (34)

각각 어떤 내용을 감싸야하는지를 고민하자

1)

만약 x제곱을 원할 때 <sup>를 쓸수있다

인쇄할때 사용하는 문자형태로 볼 수있다.

 

얘는 꾸미는것은 아니고 활자,프린트할때 사용된다.

 

<sub>는 아래첨자

 

2) 

small 은 보조적 의미

bdi 는 나라 언어별 글 쓰는 방향성과 상관없이 독립성을 주기이다. (우리나라는 크기X)

 

3)

나머지는 사용자 입력이나, api관련(그림그리기), 동영상플레이어 등이 있다.

 

 

 

II. 기본 폼 태그 (9)

1. form 태그와 submit (35)

(1) 인라인 레벨 태그

1)

여기것들 중 하나씩 해보자

 

form 사용자에게 입력받을 때 사용하는 것이다

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

input의 기본값은 텍스트 박스이다.

이때 type을 submit로 하면 제출하는 것으로 바뀐다

버튼을 누르면 제출하는 것으로 될 수있다 (새로고침 됨)

이 경우 action태그로 행동을 취할 수있게 된다  

<form action="signup">
    <input type="submit" value="회원가입">

예시로서 이러한 방식이다

 

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

    <input name = "uid">
    <input name = "pw">

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

결국에 input으로 id pw가 가능하다

이경우 회원가입등은 key, value로 전달되게된다.

 

2. Basic Form 태그 (36)

텍스트박스에다가 뭘 입력해줘야할지 말해줘야한다

1)

이런것이 label이다.

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

        <label>아이디</label>
        <input name = "uid">
        <sapn>유효한 아이디 입니다</sapn>

        <label>이메일</label>
        <input name = "email">

        <label>비밀번호</label>
        <input name = "pwd">

        <label>비밀번호 확인</label>
        <input>

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

2)

비밀번호 확인의 경우 굳이 서버에서 확인할 필요없이 프론트단에서 해결이 가능하다

그래서 확인에 대해서 별도의 name을 설정해주지 않는다

 

3)

그 외 유효한아이디인지와 관련해서 span으로 했는데 과연 이것이 바람직한것일까? 

 

4)

또한 우측 체크 이미지는 컨텐트일까?

컨텐트라면 HTML 에 포함되고 / 아니면 CSS로 해주어야한다

 

5)

막상 

지저분하게 어질러져있다 정리가 필요하다...

묶어주는 태그가 무엇인지 고민하자 

<div>
        <label>아이디</label>
        <input name = "uid">
        <output>유효한 아이디 입니다</output>
    </div>

    <div>
        <label>이메일</label>
        <input name = "email">
    </div>

    <div>
        <label>비밀번호</label>
        <input name = "pwd">
    </div>

    <div>  
        <label>비밀번호 확인</label>
        <input>
    </div>

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

<div>로 정리해준다

6) 

필드 입력시 입력할 값이 많을 경우 보이는것 처럼 필드가 여러개이다.

개인정보는 개인정보만 등으로 그루핑이 필요하다

각각

묶어서 분류해주는 것이 field set이라고 한다 

 

회원가입정보가 

이렇게 하면 네모박스로 감싸줄수있다. 

 

이런경우 필드에 대해서 라벨링을 할수있다. 

<fieldset>
    <legend>가입정보</legend>

가입정보로 감싸기가 가능하다 

 

7)

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

라벨 사용시 누구를 위한 라벨인지 표현이 가능하다

특별히 정하지않으면 바로 뒤에있는 입력 필드(기본)가 된다

필요에 따라서 순서바꾸기가 가능하다

 

필드위치가 다른곳일경우 누구를 위한것인지 애매해진다.

 

3. Radio 버튼 (37)

(1) 인라인 레벨 태그

 

얘들은 너비 높이를 가질 수있다

컨텐트를 가질수있으면서 컨텐트 크기를 

 

input에다가 text하려면 type 설정할 필요는 없다

다만 다른 것을 하고싶으면 넣어야한다.

(2) 라디오버튼

1) 

선택시 하는것엔 체크박스와 라디오 버튼으로 나누어진다

 

하나를 선택하려고할 때는 라디오버튼

여러개를 선택하려면 체크박스를 사용한다

 

2) 

그런데 radio Button은 text입력등과 달리 버튼다음에 label이 필요하다 

그냥 인간이 보기에는 순서상관없이 편하게 할수있으나, 기계가 보기에는 오해할 염려가있다.

이것을 만회위해 id지정과 for를 넣어준다

<fieldset>
    <legend> 가장 좋아하는 취미</legend>
    <input type="radio" id="r">
    <label for="r">독서</label>

    <input type="radio" id="w">
    <label for="w" >걷기</label>

    <input type="radio" id="c">
    <label for="c">등산</label>
    
</fieldset>

 

3)

그러나 

이미지와 같이 동시에 라디오버튼이 체크되는 문제가 있다

이 결과 하나의 그룹으로 만들어서 하나만 체크되게끔해야한다

 

그리고 값을 전달하기위한 식별자인 name이 정해져야한다

id는 클라이언트에서 식별이름이고 / name은 서버로 전달되는 값의 식별자이다

name은 오로지 form태그로서 사용자 입력을 받게되는 textbox 등에 대해서만 사용이가능하다

 

한편 동시문제는 세개를 같은이름(name)으로 묶어주면된다 

<fieldset>
    <legend> 가장 좋아하는 취미</legend>
    <input type="radio" id="r" name="ha">
    <label for="r">독서</label>

    <input type="radio" id="w" name="ha">
    <label for="w" >걷기</label>

    <input type="radio" id="c" name="ha">
    <label for="c">등산</label>

</fieldset>

처음에는 name을 다달리했다가, 3개를 같이 묶으니 동시에 되었다 

만약 3개중 1개만 이름을 달리하면 얘들은 복수로 선택이 가능할수도있다 

 

 

 

1. 보충

1) span 과 div의차이

 

공통점은 둘다 컨텐트를 묶어주는것으로 볼 수있다

 

차이점은 1) 크기에서 차이가 있다 div는 컨탠트의 크기와 상관이없으나, span 상관이 있다

2) div는 블럭태그라면 span은 inline태그이다 그래서 취지가 다르다

3) 출력화면에서 newLine의 적용여부가 다르다.

 

 

2. 회고 

1) 본격적으로 틀이 만들어져 가니 흥미가 올라온다.

빨리 다음편이 나왔으면 좋겠다.

 

 

 

'배움 __IL > addtionalFrontEnd' 카테고리의 다른 글

비동기적프로그래밍 정리해보기  (0) 2023.01.19
TIL : JavaScript 특유 함수개념 정리  (0) 2023.01.08
TIL : 웹퍼블리싱 HTML 3회 (6,7)  (0) 2023.01.06
TIL : DOM 2회  (0) 2023.01.05
TIL : 웹퍼블리싱 HTML 2회 (5)  (0) 2023.01.04

'배움 __IL/addtionalFrontEnd'의 다른글

  • 현재글TIL : 웹퍼블리싱 HTML 4회 (8,9)

관련글

티스토리툴바