겉바속촉
[html] css 테스트 본문
728x90
반응형
웹 페이지에다가 기사를 정리보려고 합니다!
원하는 기사를 가지고 와서
<body>블럭 사이에 넣어주세요:)
그리고서 제목, 소제목들 정리해주어야 하기 때문에
h1, h2 태그를 사용했습니다.
그리고 이제 강아지 그림을 넣어볼게요:)
image 폴더를 하나 생성해주신 후에
1. 가지고 있는 사진파일들 복사
2. image폴더에 붙여넣기
사진을 넣고 싶은 위치를 확인해줍니다:)
사이사이에
<img alt = "dog1" src = "./image/dog1.jpg">
이런식으로 작성해 주시면 되는 거에요!!
alt 속성은 이미지를 찾을 수 없을 때 출력될 텍스트입니다. 꼭 지정해주셔야해요:)
그리고 해당 폴더명을 src 속성에 저장해주세요
그리고 컴파일 해보시면 다음과 같이 강아지 사진들이
코드가 작성된 위치에 들어가게 됩니다:)
이제 우리는 CSS코드를 사용하려고 합니다
우리가 바꾸고 싶은 스타일들이 있는데
일일이 바꾸려면 시간도 들고 힘도 들겠죠?
그럴때 사용해주는 것이 바로 CSS입니다:)
<style> 태그로 감싸주시면 그 부분이 CSS라고 알려주는 거에요!
다음과 같이 <title> 아랫줄에 <style>태그를 입력합니다.
1. h1부분에 대해서 작성 -> h1태그 부분마다 적용됨
2. h2부분에 대해서 작성 -> h2태그 부분마다 적용됨
3. p부분에 대해서 작성 -> p태그 부분마다 적용됨
그 사이에 다음과 같이 작성해주시면 됩니다:)
그러면 하나하나 바꾸지 않고도
원하는 스타일로 각각 바꿔줄 수 있습니다!^^!
728x90
반응형
'IT일기(하반기) > HTML' 카테고리의 다른 글
| [html] 여러가지 checkbox들 (1) | 2020.06.11 |
|---|---|
| [html] 디자인해주기 (0) | 2020.06.10 |
| [html] image파일 넣기 연습 (0) | 2020.06.10 |
| [html] 태그 - <b>, <h>, <br>, <pre> (0) | 2020.06.10 |
| [html] 태그 공부하기 (0) | 2020.06.09 |
'IT일기(하반기)/HTML' Related Articles
more
