HTML 복습(2일)

<pre>         1 select & option         select는 몇가지 옵션을 제공한다.         -애트리뷰트         1)value - 선택에 대해서 제출되는 값         2)disabled - 엘리먼트를 비활성화 시킨다         2 textarea         여러줄의 텍스트를 입력할수있다         -애트리뷰트         1) cols - 한 줄에 입력할수 있는 글자 수          2) rows - 입력할 수 있는 줄의 수          3 input type radio         라디오 버튼 중에서 한가지만 선택할 수 있다         버튼을 그룹화하기 위해 name을 일치시켜야 한다         -애트리뷰트         1) cheack         페이지가 로드되었을 때 버튼을 선택된 상태로 만든다  </pre>

앞 게시물에서 다루었던 것들이라 패스

 

 

<h1>img</h1> <p>iamge (이미지)</p> <img src="이미지 주소" alt="HTML동물" width="400">

웹페이지에 이미지를 띄어줄수있다.  <img> 태그 인데  src=" "  안에 주소를 적어준다. alt 는 대체텍스트로 이미지가 로딩중이나 불러올수없는 경우 일때 alt안에 적힌 텍스트가 출력된다. width는 이미지의 폭을 정하는 것으로 400픽셀로 설정했다.

 

 

<h1>svg</h1> <pre>     scalable vector graphic의 약자     수학적인 방법으로 그래픽을 표현한다     확대해도 깨지지 않는다     로고나 아이콘 등을 표현할 때 사용된다 </pre> <svg height="150" width="200">    <ellipse         cx="100"         cy="75"         <!-- 중심잡기 -->         rx="90"         ry="60"         <!-- <가로 세로 정하기> -->         fill="#333"         <!-- 색 -->  <!-- 왼쪽 위 기준 --> />     <text         fill="#fff"         font-size="45"         font-family="Verdana"         x="35"         y="90"   <!-- 왼쪽 아래 기준 --> > >     LOGO     </text> </svg>

svg의 높이를 150 넓이는 200으로 설정해주었다. ellipse 는 도형의 모양을 지정해준것. 타원으로 설정해주었다. cx는 타원의 중심의 x좌표를 나타낸다. cy는 타원의 중심의 y좌표를 나타낸다. rx는 타원의 가로 반지름을 나타낸다.  즉 타원이 x축 방향으로 얼마나 넓게 자리잡는지 정하는것. ry는 타원의 세로 반지름을 나타낸다. 즉 타원의 y축 방향으로 얼마나 넓게 자리잡는지 정하는것. font-family는 글꼴을 정의해준다. 그리고 x와 y는 글자의 위치를 지정한다.

 

 

<h1>HTML 엔티티(entity)</h1> <pre>     문서에서 예약된 문자나 이모티콘등을 표현할때 사용된다     *예약된 문자: HTML 코드로 사용중인 문자 </pre> <h3>Entity name</h3> <ul>     <li>1 &lt; 2</li>     <li>&copy;y</li> </ul> <h3>Entity number</h3> <ul>     <li>&#128512;</li>     <li>&#128128;</li> </ul>

다양한 이모티콘등을 사용할수있다. 전부 외우기보다는 쓸때마다 찾아 쓰는게 맞는거같다. &it; 는 보다작다 기호로 < 를 나타내는데  &it; 대신 < 기호로 바로 사용해도 문제는 없으나 워크프레임에서 경고한다. (기호를 쓰는 가독성에 헷갈릴수있으니 주의줌)

 

시멘틱 태그 - 엘리먼트의 이름이 목적과 같은 태그
                       layout태그에서 해당이된다.

논시메틱 태그 - div 가 비중이큼

 

 

 

이제부터는 CSS를 복습해볼것이다.

CSS란 웹페이지의 스타일을 정의하는것으로 

HTML 으로 만든 뼈대를 CSS로 스타일을 입힐수있는것이다.

 

예시를 보면서 복습해보자

<h1>CSS 기초</h1>     <style>         /* 엘리먼트의 이름으로 선택한다. */         p{             color: red;             font-style: italic;             /* 기울임꼴 */         }     </style>     <p>Cascading style sheet</p>	p라는 클래스를 만들어주었다. 그리고 그안에는 스타일에 대한 설정들이 들어가있다. 색은 red 글자는 기울임꼴을 적용해주었다.
<h1>엘리먼트 선택자</h1>     <style>         ul{             border: 1px solid;             /* border 경계선 */             /* solid 실선 */         }     </style>     <ul>         <li>list ltem</li>         <li>list ltem</li>         <li>list ltem</li>     </ul>	border 은 테두리를 만들어주는 설정한다. solid는 실선으로 설정해준것이고  1px은 실선의 두께를 지정해준것이다.
<h1>클래스 선택자</h1>     <pre>         한개의 엘리먼트가 여러개의 클래스를 가질 수 있고          다른 엘리먼트가 같은 클래스를 가질 수 있다.     </pre>     <style>         /* .클래스 */         .underline{             text-decoration: underline;             /* 밑줄 */         }         .italic{             font-style: italic;             /* 기울임체 */         }     </style>         <ul>             <li class="italic underline">list item </li>             <li class=" italic">ilst item</li>             <li>list item</li>                  </ul>	아까처럼 클래스의 이름이 같다면  엘리먼트에 자동으로 적용이 될수있지만 클래스와 태크의 이름이 다르면 적용안된다. 그래서 클래스 선택자 라는것을 사용한다. 사용법은 시작 태그뒤에 class="클래스명" 을 붙여주면된다.
<h1>id 선택자</h1>         <style>             /* id */             #first {                 text-decoration:underline;             }         </style>         <ul>             <li id="first">list item</li>             <li>list ltem</li>             <li>list ltem</li>         </ul>	id선택자 / 클래스선택자  이둘의 차이점은 뭘까? 바로 유일성이다. class 선택자인경우에는 하나의 클래스를  여러번 적용시킬수있었다. 하지만 id선택자의 경우에는 하나의 id는  단 한번만 적용시킬수있다.
<h1>자식 선택자</h1>         <p>범위를 제한할 때 사용된다.</p>         <style>             /* 부모 자식 */             main ul{                 border: 1px solid;             }         </style>         <nav>             <ul>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>                           </ul>         </nav>         <main>             <ul>                 <li>list item</li>                 <li>list item</li>                 <li>list item</li>             </ul>         </main>	style을 적용할때 main의 ul을 지정해서  스타일을 정의해주었다.(ul은 main의 자식) 만약에 main ul{} 이 아니라 nav ul{} 이라면' nav의 엘리먼트만 테두리가 생길것이다.
<h1>가상 클래스</h1>         <p>특별한 상태의 엘리먼트를 선택할수있다.</p>         <style>             /* 선택자: 가상 클래스 */             /* hover - 커서가 엘리먼트 위에 있는 상태 */             li:hover{                 text-decoration: underline;             }         </style>         <ul>             <li>list item</li>             <li>list item</li>             <li>list item</li>         </ul> -->	hover 은 커서를 엘리먼트위에 올리면 작동한다. li:hover은 <li>태그 안에서 사용하겠다는것 그리고 밑줄이 생기도록 설정해주었다.