💭 서론
교육 17일차
오늘은 HTML 기초 태그들을 배웠다. 기초적인건 다 알고 있고 응용도 많이 해봤지만 html/css를 거의 독학으로 습득해서 열심히 듣긴 했다!
✔️ 블록 태그와 인라인 태그
태그는 블록 태그와 인라인 태그로 구분된다.
- 블록 태그 사례 : <p>, <h1>, <div>, <ul> 등
- 인라인 태그 사례 : <strong>, <a>, <img>, <span> 등
블록 태그
- 항상 새 라인에서 시작하여 출력된다.
- 양 옆에 다른 콘텐츠 배치하지 않고 한 라인을 독점으로 사용한다.
– 가장 많이 사용되는 블록 태그 : <div> - 한 라인을 독점으로 사용하기 때문에 width 등의 조절이 가능함.
인라인 태그
- 블록 속에 삽입되어 블록의 일부로 출력된다.
– 가장 많이 사용되는 인라인 태그 : <span> - 블록 속에 삽입되는 것이라 인라인 태그의 width 등을 직접 조절할 수 없다.
✔️ style은 태그와 가까울수록 우선적으로 적용된다.
<div id="myDiv" style="background-color:skyblue; padding:20px;">
</div>css 파일을 따로 생성해 적용하 것보다 위처럼 인라인 속성이 가장 우선적으로? 적용된다.
하지만 인라인으로 스타일을 적용해주면 재사용성과 관리가 어려움.
실무에서도 css 파일을 따로 관리하기 때문에 css 파일에서 태그에 접근해 스타일을 적용하도록 하자.
❗️!important
인라인으로 지정해준 속성이 우선적으로 적용되지만 !important를 사용하면 해당 요소의 특정 속성에 대한 모든 이전 스타일을 재정의한다.
#myDiv {
background-color:pink !important;
}예를 들어 위 div의 인라인 스타일은 배경색이 스카이블루였지만 css에서 핑크로 지정 후 !important 규칙을 지정했다.
따라서 myDiv의 배경색은 스카이블루가 아닌 핑크로 적용된다.
✔️ base 태그
href 자동완성 느낌.. 많이 쓰이진 않지만 처음 봐서 기록한다!
<a href="http://www.mysite.com/score/math.html">수학</a>
<a href="http://www.mysite.com/score/science.html">과학</a>math.html이나 science.html 웹 페이지가 모두 http://www.mysite.com/score/에 있는 경우 다음과 같이 base 태그를 이용해 수정할 수 있다.
<head>
<base href="http://www.mysite.com/score/">
</head>
(생략)
<a href="math.html">수학</a>
<a href="science.html">과학</a>
(생략)base 태그는 꼭 head 태그 안에 선언되어야 한다.
중복이 되는 url을 href 속성에 저장해놓고 a 태그의 링크는 이후의 링크만 적어주면 된다.
✔️ iframe 태그 - 유튜브 동영상 복사
유튜브에서 동영상 공유 버튼을 누르면 위와 같이 퍼가기 옵션이 있다.
iframe 태그 코드를 공유해준다. 위 코드를 복사해 html 파일에 붙여넣으면 비디오 프레임이 생긴다.
<body>
<h3>동영상~~~</h3>
<iframe width="560" height="315" src="https://www.youtube.com/embed/p060n0SI5Rw" title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</body>
✔️ 리스트 만들기 - <ul>, <ol>, <dl>, <li>
👀 3 가지 종류의 리스트 태그
- 순서 있는 리스트(ordered list): <ol></ol>
- 순서 없는 리스트(unordered list): <ul></ul>
- 정의 리스트(definition list): <dl></dl>
리스트 아이템은 <li> 태그를 사용한다.
<body>
<ul>
<li>내가 좋아하는 음식
<ul>
<li>제육볶음</li>
<li>라멘</li>
<li>파스타</li>
</ul>
</li>
<li>라면도 좋아해요.
<ol type="1">
<li>물을 끓인다.</li>
<li>면과 스프, 고춧가루 투하</li>
</ol>
</li>
<li>운동 후 바로 눕지 말자</li>
<li>역류성 식도염 주의</li>
</ul>
</body>- type="마커" : 인덱스?를 표현한다.
💭 리스트 태그는 메뉴바 같은거 만들 때 사용 해봤는데 아무것도 모르고 복붙 후에 수정하며 만든거라 헷갈렸던 부분이 실습하며 이해 되었다~~
✔️ a 태그 링크 새창에서 열기
<a target="_blank" ></a>
a 태그를 이용해 링크를 걸어주고, 브라우저에서 해당 링크로 이동하면 새로운 탭이 아닌 기존 탭에서 해당 링크가 열린다.
새로운 탭에서 링크를 열고자 한다면 target 속성의 _blank를 넣어주면 된다.
'etc > 블록체인 뉴딜일자리사업' 카테고리의 다른 글
| 블록체인 세그윗, 월드코인, 계정 추상화 (0) | 2023.05.30 |
|---|---|
| HTML5 시맨틱 태그 (0) | 2023.05.26 |
| 솔리디티 기초: 예외처리, 상속, 오버라이드 (0) | 2023.05.23 |
| 솔리디티 기초: 자료형, 변수, 함수, 모디파이어 (0) | 2023.05.22 |
| node.js와 Docker 찍먹 (0) | 2023.05.19 |
댓글