코딩배우기 다섯번째_웹싸이트 만들어보자(html)
본문 바로가기

코딩 배우기

코딩배우기 다섯번째_웹싸이트 만들어보자(html)

웹싸이트를 만들자!

 

1. 웹싸이트 구성

 

 전체를 html(body), nav(navigation), nav item, main, title, subtitle, main button

 

 

웹싸이트2  전체를 html(body), nav(navigation), nav item, main, title, subtitle, main button, pricing item

 

 

2. html을 쳐서 만들어 본다.

 

창이 뜬다

 

왼쪽에는 코드를 쓰고 이 코드의 결과값, 웹싸이트가 나온다.

 

 

3. html 창이고 '디지털노마드라이프'를 쳐보자

 

이게 어떤식으로 돌아가는 지 '디지털노마드라이프'를 치면 run을 하면 오른쪽에 그대로 뜨고 주소도 있고

주소창에 넣으면 이런식으로 웹싸이트가 뜬다. 10초만에 웹싸이트를 만들었다?!

 

4. 유용한 툴을 소개하면 "개발자 도구"가 있다.

 

 

크롬브라우저를 써도 되고 오른쪽 클릭하고 검사를 누르면 html은 어떻게 생겼고 css 어떻게 생겼는지 다 보여준다.

 

 

 

단순히 나열만 되어있어서 css로 스타일링을 해야한다.

 

 

 

5. html과 css

 

2번째 모양의 웹싸이트를 만들려면 html로 아래와 같이 치면 단순히오른쪽처럼 글씨만 나열된 것으로 보인다.

실제 웹싸이트모양처럼하려면 css(스타일링:일종의 화장할때의 메이크업?)를 해야 함.

 

 

금번회는 html로 웹싸이트 기초(뼈대)를 만들었고 css로 화장하는 법을 작성하겠다. 그러면 위에 보이는 2번째 웹싸이트 모양처럼 나올려나? 기대가 된다.

 

 

출처:유투버 코딩하는 테크보이 워니