1. HTML 식별(id) 속성
id 속성은 링크나 스타일을 지정해 놓고 <body>에서 다시 불러들이는 경우에 사용했던 기억이 있다. 특히 북마크 설정과 링크설정에 사용했었다. id의 구체적인 사용과정을 알고싶다면 아래의 링크를 다시 확인해보자.
https://dowhateveryouwant1661.tistory.com/11
HTML 링크, 이미지, 이미지맵, 배경이미지, 그림요소
1. HTML 링크(links) 링크라 함은 하이퍼링크를 말하는 것이다. 태그를 사용한다. 이 안에 href="..."를 사용해서 하이퍼링크를 연결시켜준다. 대신 웹 브라우저에 표시되는 메세지는 ...안에 표시하면..
dowhateveryouwant1661.tistory.com
id는 identification에서 특정 요소에 특정 id를 부여하는 것을 의미한다. <style>에서 id앞에 #를 붙여서 표시 후 어떤 특징을 부여할지 작성한다. 이후에 id를 사용할 부분에서 id="이름"으로 #를 제외한 id만 다시 불러들인다.
<style>
#myheader {
background-color: blue;
color: white;
border: 1 px;
text-align: center;
}
</style>
<h1 id="myheader">My header</h1>
이미 <style>에서 지정된 것을 불러들인다는 점에서 class와 id가 비슷한 점이 있다. 하지만 차이점은 각각 . 와 #를 사용하고, class는 여러 요소에 사용할 수 있지만 id는 해당하는 특정한 요소에만 사용한다는 것이다.
그런데 사용하는 측면에서 보면 어떻게 지정했든 그냥 다 사용할 수 있는거 아닌가? id이지만 id를 여러번 사용하고 싶다면 여러번 써서 사용하면 되는것 아닌가? 하지만 다시 생각해보면, 애초에 id는 특정한 것에, class는 한 특징을 여러요소에 사용한다고 미리 계획을 세우고 시작해야 하라는 말인거 같다.(이건 내 의견)
2. HTML 아이프레임(iFrame)
웹 페이지 안에 또다른 웹 페이지를 보이도록 하는 것이다. <iframe>태그를 사용한다. opening tag안에는 src, style(width, height)를 설정할 수 있다.
<iframe src="..." style="height: 50px; width: 50px;"></iframe>
아이프레임을 설정한 구역은 기본적으로 경계선이 그어지나, style="border:none;"을 추가하면 선이 없는 아이프레임을 설정할 수 있다.
<iframe src="..." style="border:none;"></iframe>
또는 다른 스타일 추가로 경계선의 색이나 두께를 조절할 수 있다.
<iframe src="..." style="border: 2px solid red;"></iframe>
링크를 설정해놓고 그 링크를 누르면 아이프레임이 실행되게 할 수 있다. 아이프레임에 name을 사용하고 링크<a>에 target을 추가한다.
<iframe height="80px" width="80px" src="..." name="iframe"></iframe>
<p> <a href="www.w3school.com" target="iframe">w3school.com</a> </p>
3. HTML 자바스크립트(JavaScript)
먼저 <script>를 알아보자. 고객측면의 문자체계를 말한다. 스크립트나 src속성을 통한 외부 스크립트 파일을 포함한다. 자바스크립트는 흔히 이미지 조작, 형식 확인, 역동적인 내용 변화에 사용된다. HTML 요소를 선택하기 위해서 자바스크립트의 document.getElementById() 방법을 사용한다.
아직 자바스크립트에 대한 감은 없지만 대략 이런 것들이 존재한다고 하니 한번 살펴보자.
document.getElementaryById("demo").style.fontsize="25px;"
document.getElementaryById("demo").style.color="red;"
document.getElementaryById("demo").style.backgroundColor="yellow;"
그렇다면 <nonscript>는? 고객의 웹 브라우저에서 스크립트를 볼 수 없거나, 고객측면의 스크립트를 지원하지 않는 경우에 대체로 나타나는 문자체계이다. 그러니까, 계획했던 스크립트가 실행되지 않을 경우에 '죄송합니다!'이런 문구가 뜨도록 설계된 것을 말하는 거 같다.
<noscript> Sorry, your browser does not support Javascript!</nonscript>
4. HTML 파일경로(file paths)
파일 경로는 웹 사이트 폴더 구조 속에 파일이 어디에 위치해 있는지를 나타낸다.
<img src="picture.jpg">는 picture그림파일이 현재 페이지와 같은 폴더에 있다는 의미이다.
<img src="images/picture.jpg">는 picture그림파일이 현재 폴더에 있다는 의미이다.
<img src="/images/picture.jpg">는 picture그림파일이 현재 웹 페이지의 이미지 폴더에 있다는 의미이다.
<img src=".../picture.jpg">는 picture그림파일이 현재 파일보다 상위폴더에 있다는 의미이다.
외부 파일과 연결되는 경우에는 웹 페이지, 이미지, 스타일 시트, 자바스크립트 등이 있다.
Absolute 파일경로는 http://www.~로 시작하는 URL을 나타낸다.
<img src="/images/picture.jpg" alt="Mountain">
Relative 파일경로는 현재 웹 페이지가 어떤 파일/폴더와 연관되어 있는지를 나타낸다.
<img src="images/picture.jpg" alt="Mountain">
+느낀점
알듯 말듯 아직 잘 모르겠다. 어떤 것을 실제로 사용하는지, 주로 활용되는 것들이 뭔지 모르고 우선 보이는 대로 하는데 실전에서 이 지식들이 어느정도로 활용될런지...
'디지털 노마드를 꿈꾸며 > HTML' 카테고리의 다른 글
| HTML 레이아웃, 반응형 웹 디자인 (0) | 2020.03.28 |
|---|---|
| HTML 헤드: 타이틀, 스타일, 링크, 메타, 스크립트, 베이스 (0) | 2020.03.19 |
| HTML 블록과 인라인 요소 (0) | 2020.03.18 |
| HTML 표, 목록 (0) | 2020.03.18 |
| HTML 링크, 이미지, 이미지맵, 배경이미지, 그림요소 (0) | 2020.03.17 |
댓글