HTML/CSS 본문(contents)영역 만들기

목차

 

-자간설정

-p태그

-블럭 둥글게 만들기

-텍스트 위아래 정렬

-백그라운드 이미지 추가하기

-백그라운드에 추가한 이미지 이동시키기

-border 로 블록 테두리에 선 그리기

-hover

 

line-height: 30px;

오늘의 주의사항

 

1. html 영역 스케치 먼저하는 게 편함.
2. 로고는 <h1> 사용
3. ul, li 모두 블럭 속성
4. float:left; 는 inline효과도 주지만, 기본적으로 아래에 있는 애들(자손 엘리먼트가 블럭이어도 ex) <li>)이 블럭이어도 옆으로 붙는 효과
5.바로 위 엘리먼트도 같이 레프트를 적용하면, 같이 인라인속성 취급되기 때문에 옆으로 바로 붙게됨
6. 블럭으로 바꿨으면 너비 지정하기(블럭은 한 줄을 다 차지하는 성질이기때문에 반드시 너비를 지정해주어야한다)

7.웹에서는 글자크기 12px이 제일 보기좋다.
8. 일단 블럭들을 다붙이고 시작하는게 오류가 적다.

 

 

자간설정하기

 

letter-spacing: -1px;

-는 좁게 +는 넓게

 

<p> 태그

 

작은내용을 적을 때 쓰는 엘리먼트

 

박스를 둥글게 출력하는 법

 

예시

border-radius: 15px;

대체적으로 높이(height)/2 해서 값을 넣어주면 저런 모양이 된다.

 

위 모양은 텍스트 정렬까지 마친 상태이고, 원래는 둥굴게 설정은 됐어도 텍스트는 왼쪽상단부터 차있었다. (원래영역)

 

가운데정렬은? text-align:center; 로 해주었다.

 

위아래 높이 정렬

 

텍스트에선 위아래를 정렬하는 두 가지 방법이 있다.

 

1.padding 사용

2. 자간을 띄워서 line-height 하는 방법.

텍스트 높이만큼( height 값 )주면됨.

(텍스트라서 2번이 가능한것. 그게 아니면 무조건 padding을 사용해야함)

 

line-height: 30px;

같은 방식으로 사용한다.

 

백그라운드로 이미지를 까는 법

ㄴ>위치를 픽셀로 조절하면서 원하는 위치에 꽂아야한다.

 

어떻게?

 

background: url('./con_ic1.png') ;

() 안엔 원하는 파일의 경로를 설정한다.

 

이렇게 하면 바둑판 배열처럼 빈공간에 모두 이미지가 나온다. (정상이다.)

 

이를 해결하는 방법은?

 

no-repeat을 달아준다.

 

background: url('./con_ic1.png') no repeat;

 

처럼 사용한다.

 

백그라운드에 깐 이미지의 위치를 이동시키는 방법

 

bottom 40px right 20px 와 같은 형식을 사용한다.

 

의미: 밑으로 40픽셀 여백 오른쪽으로 20픽셀 여백

 

background: url('./con_ic1.png') bottom 20px right 10px no-repeat;

이렇게 사용한다.

 

이렇게 사진은 다르나 비슷한 종류의 사진을 각각 다른 영역에 추가하고 싶을 때,

 

class 지정을 해서 경로 설정을 해주어야한다.(가독성 위해)

 

여기서 나오는 id와 class 차이

 

이미지 반복같은 경우 -> class

한번만 나오는 경우 -> id

결과값은 같으나 명시적 규칙

 

블록 테두리 선 지정하는법

 

아래의 코드를 활용하면 선을 지정할 수 있다.(#000은 블랙)

border: 1px solid #000;

 

근데 여기서 문제점이 하나 발생하는데,

 

블럭이 겹쳐있는 경우(나란히 붙어있는경우, 위아래 모두 포함)

 

볼더가 1px인 경우 겹치는 부분은 2픽셀된다. 그래서 겹치는 부위의 선이 굵게 출력됨.

 

해결하는 방법? 

 

따로따로 방향설정을 한다.

border-bottom: 1px solid #000;
border-right: 1px solid #000;
border-top: 1px solid #000;
border-left: 1px solid #000;

처럼 선택자로 묶어서 겹치지 않게 적용시킨다.

 

한가지 더 알아야 할 것.

 

선추가하면 전체 블록 픽셀 크기가 추가된다.

 

예를들어 right, left를 1픽셀씩 볼더를 그리면, 300픽셀이던 전체길이가 302픽셀이 된다.

 

hover

마우스 커서를 올렸을 때(만 적용하겠다.)