HTML, CSS #2

1. text-align

문서를 수평으로 정렬할 때 쓰이는 속성

예제)

• 이렇게 보이려면 어떻게 해야할까. 우리가 배운 걸 활용 할 수 있는데 먼저 a태그와 글자 색 입히기, 글자 크기 정도로 활용 할 수 있어. 하지만? 글자의 위치는??? text-align으로 조절 해보자

• bnx사이트를 div로, 네이버를 nav, 구글을 section으로 감싸줬어.

• 그리고 text-align 이게 정렬 하는거라고 했잖아! 그래서 값을 right로 주면 오른쪽 정렬이 되는거야!

• 또한 값을 center로 주면 네이버 처럼 가운데 정렬을 하겠지? 이해도 했겠지??

2. hover

마우스를 올렸을 때 입력해둔 효과를 발생 시키는 속성

예제)

위 사진 처럼 마우스는 안보이지만.. 원래 상태는 빨간색 박스이고 마우스를 올렸을 때 파란색 박스로 변경되는 걸 예시로 들어볼게!

• 먼저 div태그에 빨간색 박스를 만들고, div:hover하면 빨간색이 파란색으로 변하는 효과를 괄호 안에 적어주는거야.

3.  , text-decoration, display

 는 스페이스바 라고 생각하면 돼. html에서는 스페이스바가 1번 밖에 사용아 안돼서 스페이스바 대산에  를 사용하는거야.
text-decoration는 글자 꾸미기?? 정도이고 display는 좀 중요한데 요소를 어떻게 보여줄지 레이아웃을 결정하는 속성이고 기본값은 inline이야. 또한 모든 elements에 적용 가능해!

예시)

<div>[사과]</div> [당근] [양파] <div>[사과]</div> [오렌지] [귤]

<a href="#">&nbsp&nbsp&nbsp&nbsp안녕</a>

div {
  color:red;
  display:inline-block;
}
a{
    text-decoration : none;
}

• 위 사진 처럼 보이게 하려면 먼저 사과만 빨간색이니까 div태그에 빨간색 값을 넣어주고 원래는 div가 display기본값이 block이라서 세로로 나오는데 inline-block을 사용해 가로로 정렬되는 모습을 볼 수 가 있어.

• a태그는 알고있겠지만 밑줄이 그어져 나오잖아? 그래서 text-decoration 속성을 사용해 none으로 설정하면 밑줄이 삭제되는걸 볼 수 있고,  를 안녕 앞에 붙여놔서 안녕이 저~멀리 가있는거 보이지?