HTML의 요소에 대해서 다시 알아보자 && CSS
최근 해커톤 프로젝트를 하면서 느낀 프론트엔드의 난해함을 더욱 느끼게 된 계기가 된것같아서
html의 태그를 다시 정리해보려고 한다 .. !
- <a태그>
1. <a href="URL주소"></a>기본값으로 생략 가능.
_parent:링크된 문서를 현재 프레임의 부모 프레임에서 오픈함.
_top: 링크된 문서를 현재 윈도우 전체에서 오픈함.
프레임 이름
링크된 문서를 명시된 프레임에서 오픈함.
- <alt속성>
- 삽입한 이미지를 표시할 수 없을때 사용
= 인터넷 속도가 느리거나 src속성의 경로 오류,이미지 파일이름이 잘못되었을때등 사용
= alt속성은 이미지를 대신하여 대체 테스트로 보여줌
= alternate의 약자로 '대체하다'라는 뜻
->HTML문법 기준으로는 img태그를 사용하면 반드시 alt태그를 함께 사용해야 한다
= 그 이유는 이미지가 보이지 않아도 사용자가 어떤 이미지인지 알 수 있어야 하기 때문이다.
- 요소(elements) 특징
- 요소 : 시작과 끝나는 태그들이 모여있는것
- 수직으로 표시하는 블록 || 수평으로 표시하는 인라인
Block-level Element종류
1. <table> :표를 표시
2. <form> : 폼을 표시
3. <article> : 아티클을 표시Inline-level Element종류
1. <span> : 수평으로 표시
2. <br> : 문단 줄바꿈 표시
3. <em>,<strong>,<b> : 문자 강조 표시
4. <a> : 링크 표시
5. <p> : Paragraph 문단을 표시- List 태그
- ol(Ordered List) : 순서 있는 목록 태그 ol안에 li를 입력하며 부모와 자식처럼 함께 사용
- 표 태그
<tr> : 표 제목들을 가로행으로 정렬하기 위해 사용
<tr>
<th>
표 제목에 해당하는 단어 입력
</th>
</tr>
표 내용 역역은 <tbody></tbody>를 입력하고 <td></td>태그 사용 ex>
- 제목 가로행 표시
<body>
<table>
<thread>
<tr>
<th>제목</th>
<th>작성자</th>
<th>날짜</th>
</tr>
</thread>
<tbody>
//내용 입력
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</body>- form 태그
- input,lable,button 등의 tag 포함
1) 인풋 태그
- type : text,passsword,search 등
- 추가 식별자 속성으로는 id,name 등
- Inline Elements로 수평 표시
<form>
<input type="text" id="title">
</form>2) 레이블 태그
- text 속성은 input태그에 제목을 표시하기 위해서 label과 함께 사용
3) 버튼 태그
- fomaction : form서버가 서버로 제출될때 도착할 URL입력, type이 submit일때 사용
- formtarget == target속성
HTML 의미론적 요소[elements]
<header>
<nav>
</nav>
<section>
</section>
<article>
</article>
<footer>
</footer>
</header>CSS
cf) color 정할때 color picker
text-decoration : 텍스트를 장식하는 속성
1. underline: 텍스트에 밑줄 표시
2. line-through : 텍스트를 가로지르는 가운뎃줄 표시
3. dotted : 텍스트 밑줄이 점선으로 표시
4. none: 밑줄 표시 x
border-style : 선의 스타일 표시
-> none,dotted,dashed(파선),solid(실선),double(2줄)
border-radius : 사각형의 모서리를 둥글게 만들때 사용
성장을 추구하는 개발자 입니다 :)