HTML/CSS 홈페이지 헤드 만들기 기초

목차

-반드시 알아야할 사실

-width, height

-인라인->블럭속성으로 변경

-가운데 정렬하기

-링크 #

-리스트 동그라미 없애기

-margin과 padding 초기값 설정

-float

-엘리먼트 붙여서 출력

-로고 이미지 업로드 및 링크 연결

-하이퍼링크 언더 라인 지우기

-가운데정렬, 글자 굵게

-postion:absolute vs position:relative

-z-index

-투명도 설정

 

오늘의 목표 : 홈페이지 이미지 위에 div 태그 올리기(겹치기)

 

만들기 전에 알고 들어갈 사실!

 

1. <div>는 블럭속성을 갖고 있다. 그렇기 때문에 여기에 너비 높이 설정해서 블럭이 작아져도,

 

한 블럭 다 차지하는건 변함없다.

 

2. <div></div>안에 새로운 div 태그를 넣을 시(가둘 시) 이 div는 부모 div 안에서만 움직이게 된다.(바꾸는 방법이 있긴한데 본질은 이렇다.)

 

- 경일게임아카데미 홈페이지 상단을 보면, 헤더 div안에 로고, 메뉴 div가 존재한다.

 

3. 이들은 따로 효과를 적용하지 않았을 때 항상 위쪽 왼쪽부터 나타난다.

 

div안에 div를 넣은경우도 마찬가지이다. 바로 상위 div 왼쪽 상단에 붙은 형태로 출력된다.

 

이말인 즉슨, 부모 엘리먼트에 따라서 자손 엘리먼트의 위치가 달라진다.

 

4. 홈페이지 제작시, 픽셀은 가로 보통 최대 1200~ 최소800정도로 작업한다.

 

 

width, height

 

순서대로 너비와 높이를 말한다. 

width: 50px;

위와 같은 형식으로 너비를 조정할 수 있다.

 

한 줄을 가득 채우고 싶다면,

 

width: 100%;

로 사용할 수 있다.

 

작업을 할 때 주로 <div> 태그를 많이 쓰는데, 인라인속성을 가진 span 태그같은 경우 넓이, 높이가 적용안되기 때문이다.

 

인라인 속성 태그들은 넓이, 높이를 지정해주어도 자기가 가지고 있는 크기대로 적용된다. (텍스트 크기, 글자 수대로 적용)

 

바꾸는 방법이 있다.

 

 

인라인->블럭속성으로 변경하기

display: inline-block;

인라인 속성을 가진 태그들을 블럭속성으로 변경해준다. 

 

가운데 정렬하기

 

margin: 0 auto;

양쪽 가운데 정렬을 할 수 있는 코드이다. 이게 없다면? 모든 요소들이 왼쪽 상단 꼭지점부터 시작한다.

 

 

링크 #

 

<a href="#">로고입니다.</a>

로고입니다. 라는 글자에 하이퍼링크가 걸리지만 href 속성을 #으로 써주면 이동하지 않는다.

 

두번째 방법도 있다.

 

<a href=".\sample.html">링크입니다.</a>

이렇게 다시 자기 홈페이지에 방문되도록 설정할 수 있다.

 

리스트 동그라미 없애기

<ul>태그로 <li>를 묶어 사용할 때마다 리스트 앞마다 등장하는 작은 동그라미! 없애는 방법이 없을까?

list-style: none;

를 사용하면 간단하게 제거가능하다.

 

홈페이지 작업 시에 대부분 빼고 사용하므로 css 파일 맨 상단에서,

 

ul, li{
    list-style: none;
}

라고 선언하고 사용하는 게 편하다.

 

margin과 padding 초기값 설정

모든 엘리먼트들에는 margin과 padding이 조금씩 존재한다. (약간의 띄어진 공간이 존재함)

모든 엘리먼트들을 다 붙여놓고 시작해야 작업하기편하기 때문에 마찬가지로,

 

css파일 상단에서 margin과 padding 값을 0으로 설정해두고 시작한다.

 

 

float:left

<ul>로 묶은 <li>들을 가로로 출력하고 싶다면?

 

float: left;

이렇게 표현하면 세로로 출력되던 리스트가 가로로 출력된다.

 

엘리먼트 붙여서 출력하기. (엘리먼트 딱 붙이기)

 

대신 float은 한번쓰려면, 위아래 엘리먼트들에게 영향을 주므로, 위의 엘리먼트에도 float: left; 를 설정해준다면,

 

두 엘리먼트를 딱 붙여 출력할 수 있다.

 

**여기서 주의할 점!**

 

float :left; 를 적용시키면 뒤에 div가 있을 경우에도, 앞 엘리먼트에 딱 붙는다.

 

(Q : div는 블럭속성 인데요??

A : 네.....

Q : 왜요?

A : 그냥 그래요.... 이유는 나도 모름...)

 

(나중에 개발할 때 문제 생길 수도 있으니 인지하도록 하자.)

 

 

float:right

 

만약에 오른쪽으로 붙이고 싶다면?

float:right;

 위처럼 코드를 입력한다.

 

리스트에 float:right;를 적용하니, 리스트 순서가 반대로 출력되어 나오는 것을 확인하였다.

 

로고 이미지 업로드하고 링크 연결하기.

앵커 태그 안에 <img> 태그를 삽입한다. 형식은 아래와 같다.

 

<a href=".\sample.html">
	<img src=".\css\logo.png">
</a>

href 속성에는 눌렀을 때 이동할 주소를 입력해주었다. 홈페이지 로고를 누르면 메인화면으로 이동한다.

 

이 때 이미지 파일 주소가 제대로 입력되지 않으면 이미지가 업로드 안된다.

 

이미지 업로드 안되는 이유 대부분이 경로설정 문제이다.

 

하이퍼링크의 언더 라인 지우는 법

 

<a> 를 사용하였을 때 항상 링크는 >> 링크 << 이런 식으로 출력이 되는데,

 

보기 안좋은 이 언더라인을 지우는 방법이다.

 

text-decoration: none;

마찬가지로 css 파일 상단에서 미리 선언하고 시작하는 편이 좋다.

 

그 이외에 간단한 css 함수

 

font-weight: bold; 글자 굵게 설정

 

text-align: center; 가운데 정렬

 

z-index

여러 요소가 겹칠 때 뭐가 맨 앞에서 보일지를 결정해주는 함수이다.

 

숫자가 높을수록 먼저 나온다.(큰 수일수록 우선순위가 높다.)

 

z-index: 1;
z-index: 2;

처럼 사용한다.

 

 

여백 주기

 

top: 위로 어느정도 픽셀의 여백을 줄지
right: 오른쪽으로
bottom: 아래로
left: 왼쪽으로

 

 

사용 예시

top: 50px;

 

 

최대 2가지 조건 밖에 줄 수 없다.

top/bottom중 하나, right, left중 하나.

 

top에서 30픽셀 여백을 주라고 해놓고, 아래로 다시 20픽셀의 여백을 주라고 명령하는 것은 모순이다.

 

right, left도 같은 맥락이다.

 

오류는 뜨지 않으나, 먼저 선언한 것이 우선순위에 놓인다.

 

postion

 

엘러먼트의 위치를 설정하는 방법은 두 가지가 있다.

 

absolute와 relative

 

position:absolute;
position:relative;

처럼 사용하는데,

 

absolute는 직역하자면, '절대적인', relative는 '상대적인'이라는 뜻이다.

 

즉, 엘러먼트의 위치를 absolute로 설정한다면, 기준은 html 바디영역(절대적인 위치)이 되는 것이며,

 

relative는 조상(부모) 엘러먼트 안에서만 상대적으로 위치가 결정되는 것이다. 즉, 여백주고, 정렬하고 하는 것들이 조상 엘러먼트 안의 영역에서 일어난다.

 

그 상태로 조상(부모) 엘러먼트가 움직이게 되면, 그대로 따라간다.(상대적인 위치는 유지한 채로)

 

 

투명도 설정

 

opacity : 0.7; (0부터 1까지의 값)

 

글자는 선명하게 하고 배경만 투명도를 조절하고 싶다면?

 

background: rgba(0,0,0,0.5);

 

처럼 코드를 입력한다.