[생활코딩] project001 HTML CSS 기본 웹사이트

생활코딩 

WEB1 - HTML

WEB2 - CSS

수업을 통해서 아직은 한창 귀엽기만 하지만 

나만의 웹사이트를 만들 수 있게 되었다.

https://uz1ns.github.io/web1/index.html

유용했던 사이트들을 정리해보자면

https://github.com/

새로운 서버주소를 연동하여 만들 수 있다.

https://opentutorials.org/course/1

내가 수강하고 있는 생활코딩 웹사이트

https://studiomeal.com/

1분 코딩/ 코딩 배우는 웹사이트

https://disqus.com/

댓글 기능 추가할 수 있는 웹사이트

1. H1 태그

WEB 을 입력한 제목 태그 h1 을 이용했다.

2. ol 태그

왼쪽에 1. 2. 3. 정렬을 이용하기 위해서 ol 태그를 이용했다.

3. Mediaquery 기능

그리고 나중에 심화된 과정에서는 반응형 웹을 만들기 위해서

화면 크기가 일정 픽셀 이상 커지거나 작아졌을 때 화면의 구조가 바뀌게 하는 mediaquery 기능도 삽입했다.

  @media(max-width:800px){

        #grid{

        display: block;

       }

       ol {

           border-right: none;

      }

      h1{

        border-bottom: none;

      } 

4. margin/border/padding 값을 조정

웹사이트에서 오른쪽 마우스를 누르면 확인할 수 있는 "검사" 기능을 활용하여

margin/border/padding 값을 조정할 수 있었다.

5. Class 태그/ Id 태그와 비슷하지만

id 태그는 한 번만 사용이 가능하고, class 태그는 중복 사용이 가능

가장 아래에 적힌 값들이 최신 값을 최신값이 적용되지만

id > class > tag 선택자이기 때문에 id 는 순서의 영향을 받지 않는다. 

 id vs class

(win)

- 중복의 제거

강의에서 가장 강조하는 부분이 중복의 제거이다.

 처음에는 

<ol>

  <li><a href="1.html" style="color:gray;">HTML</a></li>

  <li><a href="2.html" style="color:gray;">CSS</a></li>

  <li><a href="3.html">Java script</a></li><br>

</ol>

이렇게 스타일 속성으로 회색을 두 1. 2. 에 적용시켰지만

중복의 제거를 없애기 위해서 

class 이름이 saw 인 태그를 적용하여

이렇게 만들었다.

<style>

.saw{

color:gray;

}

</style>

 <ol>

  <li><a href="1.html" class="saw" id="active">HTML</a></li>

  <li><a href="2.html" class="saw">CSS</a></li>

  <li><a href="3.html">Java script</a></li><br>

</ol>