< 학습 목록 >
- HTML & CSS는 무엇인가?
HTML(Hyper Text Markup Language)이란?
웹페이지를 제작할 수 있는 언어이다.
CSS(Cascading Style Sheet)란 HTML 요소의 스타일을 정의 해주는 스타일 시트 언어이다.
주로 CSS와 짝을 지어 배우게 되는데
HTML은 웹의 구조(틀)를 잡고 텍스트, 이미지 등을 입력 할 때 사용하고
CSS는 글씨의 스타일, 여백, 위치 등 스타일을 입히고 싶은 부분에 사용한다.
* HTML으로도 style 적용 가능하나 CSS를 사용하는 이유
=> 별도의 파일로 만들어 유지 보수가 편리하다 !!
(1) HTML으로 style 적용 시 => HTML 코드 내 <head> 태그에 <style> 태그를 사용하여 스타일 적용
<style>
<h1 style = “background-color : white”> Hi </h1>
</style>
(2) CSS로 style 적용 시 => 텍스트를 둘러싼 태그이름을 적고 중괄호로 열어 스타일 적용
h1 {
background-color: grey;
}
외부 파일 (.css)을 생성하여 스타일을 적용해주면 된다.
이때 주의할 점은 HTML의 <head> 태그에 외부 CSS 파일을 연결해 주어야만 CSS 파일에 작성한 스타일이 HTML에 적용된다.
<link rel="stylesheet" href="style.css">
* 태그 <tag>
< > 대괄호 안에 태그를 작성하며 태그는 검색엔진의 효율을 높여준다.
* BOX MODEL
- div : 하나로 묶어줌 (레이아웃 기능)
- width, height ⇒ 주로 너비에만 고정 값을 설정! (높이는 창 크기마다 다르기 때문에 지양)
- margin : 바깥 여백 (left, right, top, bottom)
- padding : 안쪽 여백 (left, right, top, bottom) 설정 시 자신의 width, height에 영향(padding 만큼 증가)
- border : 테두리(두께 스타일 색상 순)
<div의 전체 구성>
width + padding + border
(margin은 border 보다 바깥이기에 콘텐츠 너비에 미포함)
<margin을 이용한 가운데 정렬>
가운데 정렬하면 대부분 text-align: center;만 알고 있을 것이다.
margin: auto; 를 이용하면 컨텐츠들이 가운데로 정렬된다.
<border 사용 방법>
border : 5px solid black;
테두리두께 스타일 색상 순인데, 여기서 solid는 꽉찬 직선 테두리를 나타내고 dashed를 사용하면 점선으로 나타난다.
<border로 밑줄(윗줄) 만들기>
h1 {
text-decoration: underline;
}
밑줄을 스타일 하는 방법을 흔히 text-decoration으로 알고 있을 것이다.
그러나 아래 이미지와 같이 아래로 내려가는 소문자(y, g)가 있을 경우 밑줄에서 잘려서 예쁘게 보이지 않을 것이다.
그러나 border-bottom 속성을 사용하면 원하는 두께, 색상, 스타일의 밑줄을 얻을 수 있을 것이다.
h1 {
border-bottom: 3px solid red;
display: inline; // 길이에 딱 맞게 원할 시 속성 추가!
}
* 배경 이미지 설정 시, 여러 개로 나타날 경우 !
여러 실습 강의를 들으면서 나도 많이 겪은 상황이다. 분명 한번만 이미지를 불러왔는데 같은 이미지가 연속으로 나타난다면
이미지의 크기가 작기 때문에 정해진 너비만큼 이미지가 채워지는 것이다.
그러므로 background-size: cover;를 이용하면 내가 원하는 크기, 상태로 이미지를 사용할 수 있다.
반복 되는 것만 막고 크기는 상관이 없다면 background-repeat: no-repeat; 으로도 해결이 가능하다.
'Groom-kakao > Weekly Study' 카테고리의 다른 글
| 9월 3주차 (0) | 2024.09.23 |
|---|---|
| 8월 5주차 [스터디 후기] (5) | 2024.09.09 |
| 8월 3주차 [스터디 후기] (2) | 2024.09.07 |
| 8월 5주차 (2) | 2024.09.03 |
| 8월 3주차 (3) | 2024.08.19 |