🌞 Day 022 

• html마무리, css 시작

 ✨ Table태그의 셀 합치기 복습 

• 열(세로)끼리 병합
  ⇒ 가장 위의 셀에 rowspan 속성 부여, 값은 총 합쳐진 셀 개수
• 행(가로)끼리 병합
  ⇒ 가장 위의 셀에 colspan 속성 부여, 값은 총 합쳐진 셀 개수

 🎃 InputTypeTag 

 🎪 input Tag란? 

• input type tag는 사용자로부터 각 정보를 입력 받을 수 있는 입력란 태그들을 지칭한다.
  그들은 흔히 회원 가입시 볼 수 있는 아이디 입력란, 패스워드 입력란, 성별 선택란, 등이 있으며
  한 그룹으로 묶어서 다루어 진다. 그 한 그룹은 form태그에 의해 구분된다.

• form태그는 하나의 주제를 가지고 입력하는 다수의 사항을 하나의 그룹으로 묶어주는 태그
  ex) 회원가입, 게시판 작성 등등

• 입력되어지는 내용들은 특정 이벤트(버튼 클릭 또는 submit(전송) 실행)에 의해 서버로 전달되어 지게 되는데, 이 때 전달되는 내용을 서로 구분하기위해 name을 만들어서 저장한다.
  서버에서는 그 name을 이용하여 전달된 값들을 구분한다.
  지정한 name의 이름으로, 입력란의 입력한 내용이 value값으로 전달

 ✨ input 태그의 type들 

•  type="text" 
  • 글자를 입력받을 수 있는 입력란

    아이디 : <input type="text" name="id"/>

      아이디 :

•  type="password" 

  • 비밀번호 입력 양식 생성

    	PASSWORD : <input type="password" name="pw"/>

      PASSWORD :
    
    

•  type="checkbox" 

  • 체크박스 생성
    첫째 둘째 셋째는 화면 표시되는 단어들이고, value 값들은 서버에 전달되는 값들
  • 복수 개의 선택이 가능하다. 서버로 전송되는 것은 name과 value들이 전달되는데 이 때 전달된 복수개의 value들은 자바에서 사용하는 String [] s와 같은 1차원 문자배열의 형태로 처리된다.
  • 첫째와 둘째를 선택해서 전송한 경우
    String [ ] s <= {"first", "second"}

       첫째<input type="checkbox" value="first" name="ch"/>
       둘째<input type="checkbox" value="second" name="ch"/>
       셋째<input type="checkbox" value="third" name="ch"/>

              첫째          둘째          셋째

•  type="radio" 
  • 라디오 버튼
    : 체크박스와 비슷하지만 그룹 중하나만 선택이 가능한 선택 버튼
  • name이 다르면 중복 선택이 가능해짐

       남자<input type="radio" name="gender" value="m"/>
       여자<input type="radio" name="gender" value="f"/>

•  type="file" 
  • 파일 입력 양식 생성

  파일 : <input type="file" name="selectfile"/><hr/>

•  type="button" 
  • 일반 버튼 생성 : 모든 영역에서 기능이 발휘된다.
    다양한 기능 부여할 수 있다는 뜻

  <input type="button" value="클릭"/>

•  Select 

  • 펼침 목록, ComboBox와 같은 태그, dropdown button
  • Select태그에 name속성으로 이름을 넣는다. 선택 목록은 select 태그 안에 option태그로 하나씩 생성해주고 value값은 option에 부여한다.

    	<select name="food">
    		<option value="1">김밥</option>
    		<option value="2">떡볶이</option>
    		<option value="3">튀김</option>
    		<option value="4">순대</option>
    	</select>

    
    

•  textarea 

  • 멀티라인 텍스트 입력란

      <textarea cols="50" rows="5" name="description">가나다라마바사</textarea>

•  placeholder 
  • 입력 내용 안내 placeholder는 클릭하고 내용을 입력하면 지워지는 안내 문구

    주소 : <input type="text" size="30" placeholder="주소입력"/>

•  type="hidden" 
  • 보이지 않는 입력 양식 생성
    : 화면에서 입력받거나 표시되지는 않지만 서버에 같이 전송되어야할 데이터들을 hidden 태그를 이용하여 숨겨놓고 전송 시 같이 전송되게 한다.
  • name과 vlaue만 있고 형체가 없는 입력란
    : 입력란이라기 보다 저장 데이터로 많이 사용된다. 밖으로 보여지진 않으나 페이지에 같이 공존하면서, 서버로 전송되는 name과 value를 말한다.

    <input type="hidden" name="loginuser" value="홍길동"/>

•  type="submit" 

  • submit은 클릭하면 form안의 모든 입력 내용이 form태그에 추가로 지정한 action속성 페이지에 전송된다.
  • 버튼처럼 생겼음, value로 submit버튼 안에 내용을 적을 있다.

    <input type="submit" value="전송"/>

    
    

•  type="reset" 

  • 생긴것은 버튼처럼 생겼으나 reset은 클릭하면 form안의 작성한 모든 입력내용이 지워지고 다시 입력할 수 있게 해준다.
  • 다른 버튼 태그들처럼 value로 reset버튼 안의 내용을 작성할 수 있다.

    <input type="reset" value="다시작성"/>

    
    

 🎪 input 태그 연습 

💙 회원가입 form 만들기

• input 태그의 크기 조정 속성 ⇒ size=""
• table, tr, td 정렬 속성 ⇒ align="center"(center, right, left)
• th 태그
  : 열과 행의 제목에 td대신 쓰는 태그. 가운데 정렬, 굵은 글자
• select태그 안 option태그에 value 빼먹지 말기

 ✨ Label Tag 

• 자바 Swing에서 JLabel과 비슷하다.

• 사용자 인터페이스 항목의 설명을 나타내는 태그로 특히 input태그와 연결해서 사용할 수 있다. input태그의 아이디가 있어야 하는데 input태그의 아이디와 label 태그의 for를 일치 시키면 된다.

    <form action="">
        <label for="hobby">취미 : </label>
        <input type="text" id="hobby"/>
     </form>

 ✨ FieldSet 

• fieldset : fieldset안의 태그들을 상자로 묶어줌
• legend : 필드셋의 제목

로그인

아이디
비밀번호

 ✨ Div Tag 

• div

  • block 형식으로 공간을 분할. 차곡착곡 쌓아 내려가는 형식.
  • css를 사용해 원하는 레이아웃을 구성할 수 있기 때문에 많이 사용된다.

• block형식
  : div 태그 / h1 ~ h6 태그 / p태그 / 목록태그(ol,ul) / 테이블태그 / form태그

• block 형식의 태그는 별도의 <br/>이 없어도 줄바꿈 형식이 포함되어져 사용된다

• < 여는 꺽쇠괄호<, > 닫는 꺽쇠괄호 >

• div의 가로크기 : 지정하지 않으면 왼쪽 끝부터 오른쪽 끝까지
  div의 세로크기 : 지정하지 않으면 내용이 들어있는 만큼
  내용이 없으면 세로크기는 거의 위쪽경계와 아래쪽 경계가 붙어서 일직선처럼 보이기도 한다.(외곽선이 없으면 아예 안보임)

 ✨ spna Tag 

• span : inline 형식으로 공간을 분할. 한 줄 안에 차례차례 위치하는 형식

• inline 형식으로 사용되어지는 태그
  : span태그 / a태그 / input태그 / 글자형식태그

• inline 형식의 의미 : 줄바꿈 속성이 없어서 한줄에 이어서 나열되는 태그들

 🎃 Color 

 🎪 색상 단위 

1. 키워드를 사용한 색상 적용
   : red, orange, blue, black, white, magenta, green, yellow 등

2. RGB 색상단위
   • rgb(red, green, blue) -> (0x00~0xFF - 16진수) 0~255
   • rgba(..., alpha) -> alpha(투명도:0.0(완전투명)~1.0(완전불투명))

3. Hex코드 색상 단위
   • #뒤에 6자리 16진수, 앞부터 2개씩 빨간색, 녹색, 파란색의 수치
   • 예시
     #000000(검은색) #FFFFFF(흰색) #FF0000(빨간색) #00FF00(녹색) #0000FF(파란색) #FF00FF(보라색)

4. HSL색상단위
   • hsl(hue(색상), saturation(채도), lightness(명도))
   • hsla(..., alpha) - 기존 hsl에 투명도 추가

##  🎪 특수기호 

• HTML상에서 특수문자는 태그기호나 다른 기을의 기호와 중첩되어 제대로 나타나지 않을 수 있기 때문에 아래 문자들을 사용한다.

기호	HTML표기	의미
&	&	Ampersand
<	<	시작 꺽쇠괄호
>	>	끝 꺽쇠 괄호
	&nbsp;	Space
"	&quot;	큰따옴표
ⓒ	&copy;	저작권 CopyRight
≪	&laquo;	이중 꺽쇠괄호 - 시작
≫	&raquo;	이중 꺽쇠괄호 - 끝
€	&cent;	센트기호
£	&pound;	파운드 기호
¥	&yen;	엔화기호
₩	&#92;	원화기호

• 코드블록에서 복습해야할 것은 html에 특수기호를 변환안된 모습으로 보이기 위해서 앞에 특수기호를 붙였다는 것!!

 🎪 Sementec 구조 

• HTML5 시멘틱 태그를 사용한 웹페이지

• HTML5 시멘틱 구조 태그-주로 body 안에서 사용된다.

  <header> : 헤더를 의미(회사명/로고)

  <nav> : 네비게이션을 의미(주메뉴 구성)

  <aside> : 사이드에 위치(sub메뉴/광고)하는 공간을 의미

  <section> : 여러 중심 내용을 감싸는 공간을 의미

  <article> : 글자가 많이 들어가는 부분을 의미

  <footer> : 맺음말(이용약관|주소(위치)|저작권|사이트맵)을 의미
  

• Semantec 태그는 화면의 구성을 테마(제목, 메뉴, 본내용, 회사소개 등)를 태그로 구분함으로써 외부에서 검색을 할 경우 효과적인 검색내용을 제공하기 위한 목적으로 만들어졌다.

• 그 외 영역별 개발화면 구분 등에 활용이 되기도 하지만, 메뉴에서 또는 제목에서 검색어를 검색하는 오류를 줄이기 위한 목적이 더 크게 사용된다.

 🎃 CSS 

 🎪 CSS 란? 

• CSS(cascading style sheets)
  • Tag 안에서 지정되던 옵션을 포함, 다양한 옵션과 꾸밈 요소를 별도의 시트에 작성 후 name, id 등으로 연결 적용하는 스타일 정의 구문

 🔸태그에 스타일을 지정하는 방법 #1 

• 태그 안에 style 속성을 추가하고 그 속성의 구성값들을 기술해서 지정하기

  <div style="width: 150px; height: 150px; background-color:#0a4efa;"></div>

• 기존 방식 : <div width="150" height="150"></div>

• style 속성을 이용할 때는 반드시 필드명과 value가 (:)로 구분되어야 하며, value값이 크기를 지정하는 값이라면 반드시 단위(px)가 같이 쓰여야 한다.

• 여러 속성을 부여할 때는 (;)으로 구분하여 한꺼번에 스타일을 지정할 수 있다.

  <img src="images/hrd.png" width="100" height="100" border="3"/>
   <img src="images/hrd.png" 
        style="width:100px; height:100px; border:3px dashed red">

  두개의 방식은 같은 속성을 똑같이 지정할 수 있으나 아래 방식의 확장성이 훨씬 좋다.

 🔸태그에 스타일을 지정하는 방법 #2 

• 적용할 태그에 id 또는 class를 지정하여 그 이름을 이용하여 별도의 공간에 스타일을 지정한다.

• head태그 안에 style태그를 만들고 그 안에 스타일을 작성한다.
  

 🎪 Tag Selector 

• CSS 선택자(selector) 기본

  • 특정 HTML 태그 또는 ID 또는 CLASS를 선택할 때 사용하는 기능.
  • 선택된 해당 태그에 우리가 원하는 스타일 또는 기능을 적용할 수 있다.

• Tag Selector : Tag이름을 사용해서 스타일을 지정한다.
  하나의 태그 이름을 사용하며 그 이름의 태그에 모두 적용된다.
  Tag Selector는 앞에 #이나 . 등을 붙이지 않고 이름만으로 선택이 가능하다

• 두개의 태그에 같은 스타일을 지정할 시 콤마로 구분하여 지정한다.

•  vertical-align  : 이미지와 글자 간의 수평 맞춤 속성.
  ( top : 위쪽 맞춤, bottom : 아래쪽 맞춤, middle : 중간 맞춤 )

• border : 1px solid red
  : 선굵기 1px, 점선 아니고 연속선, 빨간색 테두리 생성

 ✨ UniversalSelector 

• 전체 선택자(*)
  : html 태그를 포함한 모든 태그가 전체 선택자의 적용 대상에 포함 된다.
  : 스타일시트에서는 화면에 보여지는 모든 태그를 select 할 수 있습니다.

• body 태그도 그 중 하나이며 body에 스타일을 지정하여 적용도 가능

 ✨ ID Selector 

• id-selector는 태그에 부여된 아이디 앞에 #을 붙여서 select한다.
  

• margin의 사용방법

  1. margin-left, margin-right, margin-top, margin-bottom을 이용하여 각 네 곳의 마진을 따로 따로 설정할 수 있다.
     margin-left : 10px, margin-right : 20px, margin-top : 30px, margin-bottom : 40px

  2. margin 이라는 이름 하나만 사용하면, 네 곳의 마진을 동일한 값을 설정한다.
     margin : 10px

  3. margin : 0 auto;

     • 이와 같이 두 개의 값을 이용하여 (두 개의 값은 공백으로 구분) 네 개의 마진을 설정할 수 있다.
     • 첫 번째 0은 위와 아래의 마진 값이고, 두 번째 auto값은 좌우 마진 값이다
     • 0이라는 값은 어떤 단위가 붙어도 0이므로 px단위를 생략할 수 있다.
     • 좌우 auto는 현재 태그를 둘러싸고 있는 태그 안에서 좌우 마진을 자동설정하여 가운데 맞춤하라는 뜻이다.

• border: 5px solid blue;는 border-width : 5px; border-style : solid; border-color : blue;라고 따로 쓴 것과 같다.

• color 스타일은 현재 태그의 하위 태그에도 적용된다.

•  overflow : hidden; 
  안쪽 내용물이 가로:800px 세로:200px 경계선을 넘어 갈 정도로 크기가 크다면 바깥쪽을 빠져나가는 부분을 화면에서 보이지 않게 한다.

•  float : left; 
  block 형식의 태그라서 사용되면 바로 줄바꿈이 일어나는 div에 줄바꿈 없이 왼쪽으로 차곡차곡 쌓이는 배치를 하라는 속성
  (다른 block 형색의 태그들도 마찬가지)

 ✨ class Selector 

• 클래스 선택자
  : 특정한 클래스를 가지고 있는 태그를 선택할 때 사용하는 선택자
  클래스 이름 앞에 (.)을 붙여서 사용한다.
  

• 웹페이지를 개발할 때 가장 많이 사용하는 선택자

• 여러 개의 클래스 선택자 사용하는 방법
  : class 속성은 공백으로 구분해서 여러 클래스를 하나의 태그에 적용할 수도 있다.

  <h1 class="item select">화면 구현</h1>

  ➡️ h1에 item, select 클래스 두 개를 적용 중

• id는 유일한 값으로 태그들을 구분하기 위한 목적으로 사용하지만, class는 서로 다른 태그도 하나의 이름을 갖는 class로 그룹화하여 사용하기 위한 목적으로 사용한다

• 태그 선택자와 클래스 선택자를 함께 사용해 다양한 태그를 그룹짓고, 구분하여 선택할 수 있다.