html css javascript 알짜 공부(2) : css 강좌

css 코딩으로 html 문서에 스타일을 지정한다. css html js를 배워서 웹페이지를 개인이 원하는 취향 대로 만들게 된다. html이 기초 공사라면, css 강좌로 웹페이지에 스타일링한 내부 인테리어를 꾸밀 수 있다. 개인 홈페이지형 블로그 만들기에도 css가 중요(css important) 한 것이다. 지난번에 이어서 '테크보이 워니(Techboi Wonie)' 님이 강의한 css html 유튜브 강좌를 복습하면서 나중에 참고할 수 있도록 내용을 정리해 놓기로 했다.

css html 코딩 위해 replit.com 접속

웹사이트 코딩을 위한 알짜 공부를 위해 https:// replit.com 에 접속한다. 별도의 프로그램을 다운로드하여 설치할 필요도 없고 그냥 사이트에 들어가서 회원가입하고 로그인 하면 된다. 아이디, 패스워드로 로그인하여 코딩 창과 실행결과창을 띄운다. 오른쪽 실행결과창을 보면서 왼쪽 코딩 창에서 에러나 스크립트 내용을 수정해 갈 수 있다. html에 이어서 css 스타일링 코딩도 실시간으로 점검하면서 실습하면 된다.

커피도 한잔하면서 기분 꿀꿀하면 막걸리도 한컵 따라놓고 '테크보이 워니' 님의 실천적 css 코딩 강좌를 반복 복습하고 훗날 참고하기 위해서 정리해 나간다. 그냥 닥치고 따라하기다. css 코딩을 배워보자.

css 강좌로 css html 코딩의 핵심을 배운다

테크보이 워니님이 유튜브 16분 남짓 동영상 하나로 실제로 웹사이트 코딩할 때 필요한 css html 코딩 핵심을 강의해 주셨다. 지금까지 몇 번 반복해서 보고 익히고 있다. 워니 님이 강조했던 말이 "코딩 기초를 몰라도 무작정 그냥 어떻게든 베끼라고 말씀..." 나처럼 코딩의 기초를 배우려는 초보자가 입문 전에 깨우쳐야 할 코딩 학습의 깨달음을 미리 제시해 준 것이다. 전문가가 말하면 초보자는 이의달지 말고 일단 따라하면 될 것이다. css 기초 핵심을 배우고자 하는 css html 알짜 공부의 기본이라고 본다.

html 코딩에서 css important는 아무리 강조해도 지나치지 않다. 스타일링이 되지 않은 웹페이지는 무미 건조하고 사용자(user) 친화적이지도 않다. 유저 인터페이스를 효율적으로 구현하기 위해서는 css 코딩이 잘 되어야 하는 것은 말할 필요도 없다. html 핵심 기초를 배운 사람이 반드시 익혀야 하는 css 코딩은 javascript를 배우러 가는 전단계에서 반드시 거쳐야 할 것으로 보고 있다. html css 강좌를 통해 실무적 방식으로 빠른 시간 내에 가장 효과적으로 학습을 해 나가야 한다. 복습을 통한 반복학습이 당연히 필요하고 이를 위해 엑기스가 되는 css html 핵심 기초 내용을 정리해 둔다.

css 강좌로 배우는 html 스타일링 기초

html 문법에 따라 태그와 속성을 사용하면서 웹페이지를 만드는 프로그램을 짠다. css 스타일링을 하기전까지는 웹페이지에 구현을 해보면 웹문서가 짜임새도 없고 균형도 잡히지 않은데다 내 취향도 아니다. html 태그에 속성을 부여하고 , 그 속성에 대하여 각자 취향에 맞게 스타일링을 하는 css 코딩을 해야 한다.

우리가 보는 웹페이지는 개발자 도구를 통해 코딩의 소스를 볼 수 있다. 키보드에서 'F12' 를 누르면 현재 열려있는 웹페이지의 소스코드를 볼 수 있는 창이 열린다. 창조의 원천은 모방이라고 했다. html css 코딩을 하면서 어떤 속성 값의 표준을 모를 때는 현존하는 비슷한 웹페이지를 열어서 'F12' 자판을 눌러서 해당되는 소스코드를 가져와서 그대로 쓰면 된다. 물론 자신만의 스타일링을 위해 속성 값을 변경해도 괜찮다. 개인의 취향이고 자유이니까.

<body> 태그 내에서 코딩한 html 태그에 속성을 부여하고 그 속성에 대하여 css 스타일링을 <head> 태그 내여서 한다. 일반적으로 css 코딩만 따로 모아서 style.css로 저장한다. 나중에 익숙해 지면 style.css 파일로 별도로 저장하자. 웹페이지가 멋있으면서 사용자 인터페이스(user interface)가 좋으려면 css 스타일링이 유효하게 적절하게 되어야 하는 것이다. css 코딩으로 스타일링 되지 않는 웹페이지는 초등학생 숙제 노트 처럼 제대로 정리되지 않고 체계가 없다. 워니 님의 css 강좌를 따라가면서 참고로 삼은 웹페이지를 css 코딩으로 완성해 가본다.

<body> 태그내 html 코딩

body 태그내에 html 코딩을 한다. 웹페이지를 구현하는 각각의 코드 블록마다 적절한 속성 이름을 부여하고 속성 이름에 해당하는 스타일링을 css 코딩으로 구현해 준다. 코딩을 해 나가는 중간중간 필요할 대마다 실행창을 통해 구현되는 웹페이지 html 코드의 css 스타일링 구현을 확인하면서 css 코딩 알짜 공부를 진행한다. 앞서 포스팅한 'html css js 알짜 공부(1)'을 참고해도 좋다.

<body>

테크보이 워니

</div>

</div>

Pricing

</div>

Quickly build an effictive pricing table for your potential customers with this bootstrap exampl. It's built with default Bootstrap components and utilities with little custominzation.

</div>

Free

</div>

$0 <span class="price-item-month">/mo </span>

</div>

10 users included

</div>

2 GB of storage

</div>

Email support

</div>

Help center access

</div>

Click me

</button>

</div>

Free

</div>

$0 <span class="price-item-month">/mo </span>

</div>

20 users included

</div>

10 GB of storage

</div>

Email support

</div>

Help center access

</div>

Click me

</button>

</div>

Free

</div>

$0 <span class="price-item-month">/mo </span>

</div>

30 users included

</div>

15 GB of storage

</div>

Email support

</div>

Help center access

</div>

Click me

</button>

</div>

</body>

</html>

<head> 태그 내 css 코딩

head 태그 내에 css 코딩을 한다. 웹페이지 내 html 태그마다 구현하고자 하는 스타일링을 css 코딩으로 할 수 있다. 각각의 html 태그에서 속성 이름을 부여하고 속성 값을 css 스타일링 코드로 프런트 앤드를 완성해 가는 것이다. css 코딩은 자바 언어로 만들어지는 것 같다. java를 따로 배우지는 않았지만 상식 수준으로 알고 있는 견지에서 대충 코드 스크립트를 보니 자바 언어이다. 함께 보면 좋은 포스팅 : html css js 알짜 공부(1)

<! DOCTYPE>

<html>

<head>

<title> repl.it </title>title>repl.it</title>

<style>

. nav {

height: 70px;

border-bottom: 1px solid black;

display: flex;

align-items: center;

}

. nav-right-items {

display: flex;

margin-left: auto;

}

. nav-item {

margin-left: 10px

}

. title {

text-align: center;

font-size: 3.5rem;

font-weight: bold;

}

. subtitle {

text-align: center;

font-size: 1.25rem;

font-weight: 300;

}

. main {

width: 1000px;

margin: 0 auto;

margin-top: 60px;

}

. prices {

display: flex;

}

. price-item {

width: 300px;

height: 350px;

border: 1px solid black;

margin: 20px;

border-radius: 4px;

text-align: center;

}

. price-item-title {

font-size: 1.5rem;

background: rgba(0,0,0,. 03);

height: 53px;

line-height: 53px;

border-bottom: 1px solid black;

}

. price-item-price {

font-size: 2.5rem;

font-weight: bold;

padding: 20px;

}

. price-item-button {

padding:. 5rem .5rem 1rem;

font-size: 1.25rem;

line-height: 1.5;

border-radius:. 3rem; .3rem;

color: #007 bff;

background-color: transparent;

background-image: none;

border-color: #007bff;

margin-top: 30px;

}

. price-item-button-active {

background-color: #007bff;

color: white;

}

. price-item-month {

font-size: 16px;

color: gray;

}

. price-item-detail {

margin-bottom: 5px;

}

</style>

</head>

css html 알짜 공부 반복

혼자서 책을 보면서 코딩을 공부하는 것은 효과적이지도 않고 효율적이지도 않다. 당연히 만족할 만한 성과를 얻는데 한계가 있다. 코딩을 공부하는 것은 프로그램이라는 생명을 부여하는 살아있는 언어를 다루는 것이기 때문이다. 코딩을 배우는 가장 좋은 방법은 일단 직접 스크립트를 작성하며 프로그램 언어데 부딪쳐 보라고 코딩 전문가들은 말한다. 책만 보고 축구를 공부한다고해서 실제 축구경기장에서 좋은 플레이를 펼친다는 보장이 없듯이 코딩도 마찬 가지다. "꿩 잡는 게 매"라고 직접 자기 손으로 코드 블록을 만들어 보는 것이 배움의 효과가 가장 큰 거 같다. 유튜브 등에서 css 강좌를 들으면서 전문가 또는 강사님이 하는 데로 그대로 무작정 따라 하는 것이 가장 빠른 길인 것 같다. 그런 점에서 이전 포스팅에서 워니 님의 7분 남짓 시간 동안의 html 강의는 html 기초를 배우기 위한 엑기스만 전달하는 것으로 아주 훌륭한 강의였다. 마찬가지로 이번에 16분 정도의 css강의도 아주 효과 만점의 좋은 강의였다고 생각된다(www.youtube.com/watch?v=RK5foxPm5GA). 적어도 나에게는 그랬다. 시간 절약에 알짜배기 진액만 쪽쪽 빨아먹도록 지도해 주신 테크보이 워니 님께 감사드린다.

저작자표시 비영리 변경금지 (새창열림)

하나마나 디자인 발가락 코딩으로 앱 만들기