디자이너가 배우는 HTML/CSS
디자이너가 "Sublime Text" 프로그램으로 해보는 HTML/CSS
HTML/CSS는 "Sublime Text"라는 프로그램을 사용하여, 텍스트를 나열하고 이후 Chome으로 내가 지정한 값대로 웹 구정이 되었는지 브라우저를 열어 확인해보는 방식으로 배워보았다.
Text에 대해 자세히 알아보겠다.
먼저, Text가 웹이나 앱의 환경에서 중요한 이유는, 정보전달의 역할 때문이다.
이러한 이유로 Text는 많은 것들이 고려된다.
Text는 타이포라고도 하는데, 서체의 종류, 크기, 자간, 행간, 정렬, 줄간격, 들여쓰기, 내어쓰기, 여백 ... 그리고 영어일때는 대소문자 여부까지 고려되어야 할 것들이 정말 많다.
여기서, 중요한 개념이 있다.
바로 "웹 폰트" 라는 개념이다.
"웹 폰트"란, 웹이라는 환경에서 통용되는 서체이다. 이 웹 폰트에는 치명적인 단점이 있는데, 웹 폰트는 누군가가 서버에 올려놓은 웹 폰트 파일을 받아와서 쓰는 것이므로, 폰트를 받아 온 서버가 죽어있다면 폰트를 가져올 수가 없다. 그래서 웹 폰트를 사용할 시, 항상 대체폰트를 생각하고 명시에 두어야 하는 것이다.
대체폰트로는,
1. Arial
2. Arial black
3.Courier New
4. Times New Roman
5. Trebuchet MS
6. Verdana
등이 있다. 이 대체폰트들은 '안정한 서체'로 분류되는데, 이는 맥이든 윈도우든, 해당 서체들은 다 있기 때문이다.
실습에 들어가보자.
먼저 폴더 안에 오늘 실습해 볼 파일을 만든다.
내가 오늘 만든 실습파일의 이름은 'day3.html'이다.
바로 이어서 CSS 소스로 가져갈 페이지도 만들어 준다.
html/css하다 보면 많은 폴더나 파일들이 쌓이게 되는데, 이때 구분을 잘 해주어야 다른 직무간 커뮤니케이션을 원할하게 할 수 있다.
나는 'static' 파일 안에 'css'를 만들고 그 안에 'second_style.css'를 만들어 디자인요소들을 넣어주기 시작했다.이 파일은, 앞서 만든 'day3.html'와 계속해서 연동하여 웹 화면을 꾸며 줄 것이다.
1. "Source" 라는 가장 상위 폴더 안에 나머지 다른 요소들이 들어가게 폴더를 구축해야 한다.
"day3.html"폴더를 생서하고 html의 기본구조인,
<!doctype html> 이 문서는 html임을 선포해주고 차례로 head와 body를 만들어준다.
이후 nav와 aside, article까지 만들어서 기본 구조를 잡아준다.
2. html 파일의 기본 구조와 기본 내용을 모두 넣었다면,
'static' 폴더 안, css폴더를 만들고 그 안에 second_style.css를 생성해준다.
이렇게 폴더를 여러개 만들어 depth를 깊게 하는 이유는,
수 많은 html 파일들 중에서 css에 관한 파일을 쉽게 찾기 위해서 폴더링 해주는 과정인 것이다.
CSS파일을 생성할 때는 '주석'이 정말 중요하다.
개발자와 디자이너간 협업을 할때, 혹은 개발자가 다른 개발자나 프로그래머에게 파일을 넘겨
협업할 때, 해당 html/css 값이 어떤것에 대한 것인지 쉽게 알아보기 위해서이다.
'주석'에 대한 중요성은 아무리 강조해도 지나치지 않는다.
3. 주석을 달아주고 html문서에서 주었던 여러 값들에 디자인하기 시작한다.
html문서에서 class 값을 주었던 것들을
css문서에서는 같은 제목이지만 맨 앞에 온점(.) 하나를 찍어주어 디자인 하기 시작하는 것이다.
"Text의 대소문자와 간격조절에 대해"
4. text-transform의 값을 uppercase로 주면 대문자로 나타나지고
lowercase로 주면 소문자로 나타난다.
5. <p>는, '피 테그'라고도 불리우는데, 이는 paragraph(단락, 절) 이라는 뜻이다.
피 테그에 uppercase를 주었느냐 lowercase를 주었느냐에 따라
소문자 혹은 대문자로 텍스트가 바뀐 화면을 볼 수 있을 것이다.
6. sublime text에서 letter spacing를 줄 수 있는데, 이는 '한 글자, 한 글자' 별로
자간 간격이 조정되는 것이다.
아무 웹사이트나 가서 기사를 클릭한 후, 오른쪽 마우스 버튼을 누르고 '검사'에 들어가면
사진과 같이 해당 웹 화면의 html/css 값을 확인해볼 수 있다.
임으로 letter-spacing값을 9px로 늘려봤더니 재미있는 결과가 나왔다.
이 화면은 이 값을 조정한 나에게만 보여지므로, 마음껏 실험해봐도 괜찮다.
7. 텍스트 간격 조정에는 'letter spacing'이 있고 'word-spacing' 이 있는데,
전자는 '한 글자, 한 글자' 개념이라면 후자는 '단어 즉, 덩어리'별 자간 값이 들어간다.
앞에서 본 letter spacing과 다르게 단어별로 간격이 커지는 것을 확인해 볼 수 있다.
letter spacing 보다 word spacing이 훨씬 많이 쓰인다고 한다.
8. table을 만들어보자.
table은 '표' 개념이다.
table의 기본 구조인, <thead>, <tfoot>, <tbody>를 잡고 표에 들어갈 내용들을 넣어준다.
새로고침 후 브라우저에서 확인해보니, 왼쪽 화면과 같이 표와 표 안의 내용들이 나타나 진다.
9. html에서 값을 모두 넣어준 후, css로 와서 td값 등을 디자인 해준다.
좀더 표처럼 보이기 위해 border값을 1 주어 outline을 생성해준다.
10. head title로 들어갔던 영역인 'UX/UI DESIGN SCHOOL' 부분을
h1이라 명명하고 css에서 디자인을 주었다.
바탕 색은 그린색으로하고, letter spacing과 word spacing은 em단위로 주었다.
11. css에서 ids-header-box에 준 값대로 디자인되었음을 확인할 수 있다.
★★★★★
"div에 class를 주고 box1, box2, box3, box4 값을 주어
margin값을 실험해보자"
1. div에 class를 걸어서 박스 4개를 만들어준다.
magin값을 실험해보기 위해 각기 다른 값을 넣어준다.
우측 아래 네모난 사각형이 여러개 겹쳐있는 그림을 볼 수 있는데,
이것이 magin값을 보여주는 가이드이다.
상자의 가운데 지점을 기준으로 padding --> border --> margin 으로 나뉜다.
2. div의 class 별로 준 값에 따라 margin값이 변하는 걸 알 수 있다.
우측 아래 네모박스의 숫자를 자세히 봐보자.
3. CSS에서 box별로 컬러와 마진값이 각기 다르게 들어간 것을 확인할 수 있다.
★★★★★
"margin과 비슷한 padding"
1. margin과 같은 개념으로 padding값을 바꿔주니, 이전에는 없던 padding부분의 여백 값이 매겨진다.
(우측 아래 네모 박스들을 확인해보자)
★★★★★
"<picture>"
<picture>에 <source>를 주고 하나의 대표 이미지를 <img>로 지정한 후,
크기에 따라 이미지가 교차되는 것을 프로그래밍 할 수 있다.
1. 'small', 'medium', 'large'라고 명명한 각기 다른 픽셀값의 사진을 준비한다.
그 후 <picture>로 씌우고 <source srcset>을 각각 지정해주면,
픽셀크기가 변함에 따라 지정한 이미지로 교차되는 것을 볼 수 있다.
(영상↓ 위와 같은 내용을 적용하여 웹 브라우저 화면을 구동시켜 보았다.)
★★★★★
"<video>"
이번엔 이미지가 아닌, 원하는 동영상을 웹 브라우저 화면에 full screen으로 띄워보자.
1. 인터넷에서 원하는 'mp4'파일을 구한 후,
static폴더 안에 css폴더 안에 video라는 폴더를 새로 생성한 후 mp4파일을 넣어주자.
그리고 <video autoplay loop style="max-width: 100%></video>로 감싸 준 후,
</video>앞에 <source src=".mp4">를 추가하자.
(영상↓ 위와 같은 내용을 적용하여 웹 브라우저 화면을 구동시켜 보았다.)
★★★★★
"<iframe>"
<iframe>을 이용하여 유투브에 있는 영상도 나의 웹 브라우저 화면에 올릴 수 있다.
정말 정말 간단하다.
1. 위 형식대로 html에 값을 입력한 후 src="" 부분에 유투브 영상의 '소스코드'를 긁어와 그대로 붙여넣기 하면 끝이다.
유투브의 '소스 코드'를 클릭하면 다음과 같은 html값이 그대로 나와 있다.
(영상↓ 위와 같은 내용을 적용하여 웹 브라우저 화면을 구동시켜 보았다.)
[기억해야 할 내용들]
"html은 모두 '요소'로 이루어져 있다."
"padding은 요소간 내부 여백을 말하고,
margin은 요소간 외부 여백을 말한다."
"html 요소는, '박스(box)'로 이루어져 있다."
"wine-art.com"
: '박스(box)'를 이해하기에 전체적으로 좋은 레퍼런스 사이트이다."
'Report > 코딩(Android, iOS, html, CSS)' 카테고리의 다른 글
| Report_032. 코딩(Cording) : iOS / 디자이너가 Xcode 프로그램으로 해보는 코딩 (0) | 2017.05.24 |
|---|---|
| Report_026. 코딩(Coding) : Android / 디자이너를 위한 안드로이드 디자인해보기 (0) | 2017.05.17 |
