1. 하이퍼링크, 이미지 삽입하는 방법
2. class와 id의 역할과 차이점
3. css 파일과의 연결
4. 주석(coments) 다는 방법
1. 하이퍼링크, 이미지 삽입하는 방법
-
링크와 이미지를 삽입할 때는 각각 a 태그와 img 태그를 사용한다.
-
링크는 웹사이트 주소를 복사해서 넣을수도 있고, 클릭해 이미지를 띄우는 등 다양하게 이용할 수 있다.
-
이미지는 웹에 있는 사진을 넣을수도, 기기에 있는 사진을 넣을수도 있다.
<a href="https://www.instagram.com/kkyukkyu_99/">
인스타그램 주소</a>이렇게 a 태그 사이에 쓴 글은 웹사이트에서 하이퍼링크가 입혀지는 글?로 나타나게 된다. 인스타그램 주소를 클릭하면 해당 주소로 이동할 수 있다.
인스타그램 주소 이렇게!<img src = "image/images.jpg">html 파일이 있는 폴더에 image라는 폴더가 있고 그 안에 ,images.jpg라는 사진이 있다. 이럴때 이렇게 파일의 위치를 src(source 의 축약)에 써주면 해당하는 이미지가 삽입된다.
또한 웹사이트에 있는 이미지를 이용할 수도 있는데 방법은 동일하게 src 뒤에 이미지 링크를 복사해서 넣으면 된다.
class와 id의 역할과 차이점
-
우리는 웹페이지에서 동일한 역할을 가지는 내용들 예를 들어 노래 여러가지를 소개하는 페이지를 만들어본다고 생각할 때, 각각의 노래에 노래제목, 가수, 앨범자켓, 작사작곡, 가사 등의 정보들을 적을 수 있을 것이다.
-
이 때 각각의 내용들에 같은 style을 적용하고자한다면 class를 이용해서 노래제목에 해당하는 style을 적용할 수 있다.
-
예를 들어 class="song-title" 이라는 class가 있을 때 우리는 style 에 해당 클래스의 설정값을 입력해서 song-title이라는 class를 가진 곳에 모두 같은 style을 적용할 수 있다.
-
이런 과정에서 만약 각각의 노래마다 특성을 주고싶다면 id를 이용해서 각각에 다른 style을 적용할 수 있다.
-
class는 여러요소에 적용이 가능한 반면, id는 한개의 요소에만 적용이 가능하다.
3. css 파일과의 연결
- 이렇게 h1~h6, p를 비롯해 하이퍼링크나 img, class에 style을 적용하다보면 style 태그 내부에 내용이 많아지는데 이를 css 파일을 새로 작성해서 밖으로 빼서 정리해두면 편하게 관리할 수 있다.
- css 파일을 만들어 내부에 style 태그와 태그 내부의 내용을 모두 복사해서 붙여 넣으면 css 파일의 작성은 끝이다.
- 하지만 그렇게 하면 html 파일은 그냥 style 태그가 빠진 코드가 될 뿐이므로 css 파일과 연결하는 코드를 추가해야한다.
<link href ="css/style.css" rel="stylesheet">이렇게 링크 태그를 원래 sytle태그가 있던 위치에 작성해주면 html 파일과 css파일을 연결할 수 있다. 파일이있는 경로를 href에, rel은 relation의 축약어인데 rel에 stylesheet라고 써주면 연결 완료!
4. 주석(coments) 다는 방법
- 주석을 다는 방법은 html과 css 둘에 약간의 차이를 가지고 있다.
<!-- 이렇게 하면 html 주석이지롱-->/* css 는 이렇게! */