1. 이번에는 h1 태그(WEB)를 크게 하고 가운데로 정렬하는 방법을 알아보겠습니다.
이 속성과 속성값을 알기 위해 검색을 해보겠습니다.
검색어는 css text size property
키워드로 검색을 하면 맨 위에 "CSS font-size property-W3Schools"로 들어갑니다.
그럼 font-size 속성에 속성값 크기들의 예가 나옵니다.
<style>태그 안에 h1속성을 입력한 다음 font-size:60px;를 입력했습니다.
<style>
h1{
font-size:60px;
}
</style>
이렇게 했더니 heading1의 WEB의 크기가 커졌습니다.
이번에는 WEB을 가운데 정렬로 해보겠습니다.
검색어 css text align property로 구글에서 검색을 해보겠습니다.
가운데 정렬을 할 거니까 center로 하겠습니다.
<style>
h1{
font-size:60px;
text-align:center;
}
이렇게 입력하니 위에 보시는 것처럼 WEB글자가 가운데로 정렬이 되었습니다.
2. 이번에는 선택자의 모든 링크는 기본적으로 검은색이면서 이미 방문한 것은 회색, 방문하고 있는 것 (현재 페이지)는 빨간색으로 나타내겠습니다.
1) 기본적으로 목차가 검은색으로 나타나게 하기 위해서 <body></body>안에서 하이퍼링크빼고 다른 속성값은 삭제를 하고 <head></head>안의 <style>에서 a selector안에서 color:black이라고 입력을 하였습니다.
2) 두 번째 방문한 목차가 회색으로 나타나게 하기 위해서
<li>으로 가서 class="saw"라는 속성을 입력합니다. 이미 봤다는 뜻으로 saw으로 합니다.
그리고 위에 <style>로 가서 saw{}안에 color:gray;를 입력합니다. 하지만 웹페이지 목차의 색깔이 변하지 않았습니다.
이럴 때는 saw앞에 ˙saw라고 앞에 점(class태그를 뜻하는)을 붙입니다.
그러면 위의 웹페이지의 목차 부분에서 1. HTML과 2. CSS 색깔이 회색으로 바뀐 거를 볼 수 있습니다.
3) 이제 마지막으로 방문하고 있는 페이지, 즉 현재 페이지를 빨간색으로 나타내 보겠습니다.
<class="">태그 안에 active 즉 현재 활동이라는 속성값을 입력했습니다. 그랬더니 위에 보이는 것처럼 CSS부분이 빨간색으로 변했습니다.
하지만 이것으로는 불완전합니다. 왜냐하면 방문한 것과 방문하고 있는 것을 모두 class란 태그로 묶어서 같은 레벨이므로 방문하고 있는 것을 우선 순위로 두려는 당초의 의도를 충족하지 못하고 있습니다.
그래서 id란 태그를 사용해보겠습니다.
<li>로 가서 CSS부분에 id="active"란 태그를 추가합니다.
그리고 <style>로 가서
#active{
color:red;
}
를 입력합니다.
웹페이지상에서는 별 달라진 바는 없으나
a/class/id
태그들의 상위관계를 보면
id>class>a
이므로 세 개의 태그의 위 아래가 아무리 바껴도 무조건
저 순서대로 웹페이지에 나타납니다.
왜냐하면 좀더 구체적인 것이 포괄적인 것보다 우선 순위가 높기 때문입니다.
따라서 태그 선택자를 통해 전체적인 디자인을 하고 그 중 예외적인 것들의 id를 찍어가면서 id 선택자를 선택하는 것이 코딩하는 데에 훨씬 더 효율적입니다.
여기까지 했으면 검색을 할 수 있습니다.
검색어 css selector를 입력해 봅니다.
이제 이것을 해석할 수 있는 아주 기초적인 능력을 갖게 된 것이라고 합니다. (아직 저는 잘 모르겠습니다만.)
앞으로 차근차근 하다보면 작성하는 코드양을 획기적으로 줄일 수 있고 어떤 한 부분만 수정하면 나머지가 동시에 바뀌는 똑똑한 코드를 짤 수 있는 토대가 마련된다고 합니다.
* 글을 작성하고 HTML로 변환을 해보았습니다.
코딩을 조금 공부해보고 이것을 보니 정말 엉망이라는 생각이 듭니다. 하지만 아직은 HTML로 글을 바로 작성하기에는 실력이 부족하여 시간이 너무 걸릴 거 같습니다. 실력을 쌓아 글 색깔이나 이미지 삽입은 HTML로 직접 할 수 있도록 해야겠습니다.
'To go to 뉴질랜드 > 간식 - IT(코딩)' 카테고리의 다른 글
| BOX model을 이용하여 웹페이지 디자인하기 (0) | 2021.02.14 |
|---|---|
| CSS박스모델(border,padding,margin,width) (0) | 2021.02.11 |
| 동영상 삽입/CSS시작 (0) | 2021.01.24 |
| 웹호스팅을 해보려고 하다.(모르겠다ㅠㅠ) (0) | 2021.01.23 |
| 처음으로 "웹사이트"를 만들다. (0) | 2021.01.13 |
