안녕하세요. 문범우입니다.
서울시립대학교 멋쟁이사자처럼에서 지난 25일, 일요일에 수업을 진행했는데 개인노트북에 문제가 생겨서 바로 정리하지 못하고 이제서야 하게 되었습니다.
해당 수업부터 프론트엔드에 관련되서는 작년 서울시립대학교 멋쟁이사자처럼 5기의 김도현님께서 수업을 진행해주시겠습니다.
먼저 해당 포스팅에 대한 내용 순서는 아래와 같습니다.
- Class, Id
- position, float
- z-index, fonts
- link, stylesheet
- 페이지 제작을 통한 실습
1. Class , id
id는 태그에서 1개만 적용이 가능합니다.
예를 들어, 특정 태그에 id_1 과 id_2 를 함께 적용하고 싶다고해도 불가능 한 것입니다. 하나의 태그에는 하나의 id만 적용이 가능합니다.
하지만 이와 반대로 class는 복수 적용 가능합니다. 즉, 특정 태그에 class_1과 class_2를 적용시키고 싶다면 띄어쓰기로 구분하여 두개의 클래스를 모두 명시해줌으로써 모두 적용시킬 수 있습니다.
바로 코드를 통해 확인해보도록 하겠습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title></title> <style> #id_1{ background-color: blue; width: 250px; height: 250px; } .class_1{ background-color: red; width: 250px; height: 250px; } </style> </head> <body> <div id = "id_1"> loremloremloremloremloremloremloremloremloremlorem </div> <div id = "id_1"> loremloremloremloremloremloremloremloremloremlorem </div> <div class = "class_1"> loremloremloremloremloremloremloremloremloremlorem </div> <div class = "class_1"> loremloremloremloremloremloremloremloremloremlorem </div> </body> </html> | cs |
위의 코드에서는 4개의 division을 생성하여 2개에는 id_1 을 id로 지정시켰으며 나머지 2개의 division에는 class_1을 class로 지정하였습니다.
추가적으로 위에서 말씀드렸듯이 여러분께서 직접 id_2와 class_2를 만들어 적용시켜보시면 그 차이를 아실수 있습니다.
2. span, div
span과 div에 대한 것은 지난 포스팅에서도 말씀드렸던 부분입니다.
간단히 되짚어 보자면, span은 특정 문장이나 문단, 단어와 같은 것에 대해 스타일을 달리하는 등의 작업이 필요할 때 해당 부분을 span태그로 묶어서 스타일을 적용합니다. 이와 다르게 div태그는 html내에서 요소를 묶는 개념으로 box로 생각하시면 될 것 같습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> #id_1{ background-color: blue; width: 250px; height: 250px; margin-left: 40px; margin-top: 40px; padding-left: 20px; padding-top: 20px; } .class_1{ background-color: red; width: 250px; height: 250px; margin-left: 80px; margin-top: 120px; padding-left: 30px; padding-top: 30px; } </style> </head> <body> <div id = "id_1"> <span>loremloremloremloremloremloremloremloremloremlorem</span> </div> <div id = "id_1"> <p>loremloremloremloremloremloremloremloremloremlorem</p> </div> <div class = "class_1"> <span>loremloremloremloremloremloremloremloremloremlorem</span> </div> <div class = "class_1"> <p>loremloremloremloremloremloremloremloremloremlorem</p> </div> </body> </html> | cs |
3. position, float
기본적으로 position과 float는 태그가 아닌 태그에 대한 속성 값 입니다.
둘다 기본적으로 요소의 위치를 잡아주는데 사용하지만 속성의 이름이 다른 것과 같이 사용법이나 특징에 차이가 존재합니다.
기본적으로, 개별 속성의 위치는 position을 이용합니다. position는 default 값으로 static 값을 가지고 있으며, 추가적으로 설정할 수 있는 값으로는 relative, absolute, fixed 가 있습니다.
각각의 값에 대해 간략히 설명드리면 아래와 같습니다.
static은 말씀드렸듯이, position에 대한 기본값으로, 굳이 static으로 설정하는 일은 거의 없습니다. 단지 앞에서 설정된 position을 무시하는 등의 작업이 필요할 때 사용될 수도 있습니다.
relative는 static값을 가졌을 때 요소의 위치를 바탕으로 계산된 위치를 나타냅니다. 즉, position이 relative값을 가지고, 이때 top과 left를 각각 10px로 준다면 해당 요소가 static일때의 위치를 기준으로 위쪽과 왼쪽에서 10px만큼 떨어진 곳에 위치하게 됩니다.
absolute는 단어그대로 절대적 위치를 지정합니다. 요소의 초기 위치와 상관없이 화면자체 상에서의 좌표를 바탕으로 계산됩니다.
마지막으로 fixed는 화면에 고정되도록 하는 값입니다. 즉, 스크롤을 내려도 fixed의 값을 가지는 요소는 고정적인 위치에 그대로 위치합니다.
그리고 float는 요소의 위치를 정렬해주는 요소입니다. 쉽게말해서, A라는 요소의 float값을 left로 설정한다면 해당 요소는 왼쪽에 위치하게 됩니다.
float에 대한 설명은 아래 사이트에서 보다 쉽게 설명해주고 있기에 참고하시면 좋을 것 같습니다.
https://ofcourse.kr/css-course/float-%EC%86%8D%EC%84%B1
저는 아래와 같은 코드를 구현하여 직접 확인해보았습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> .clearfix::after { content: ""; clear: both; display: table; } .wrap{ margin-left: 100px; } #id_1{ background-color: blue; width: 250px; height: 250px; margin-left: 40px; margin-top: 40px; padding-left: 20px; padding-top: 20px; float: left; } .class_1{ background-color: red; width: 250px; height: 250px; margin-left: 80px; margin-top: 120px; padding-left: 30px; padding-top: 30px; float: right; } .element1{ background-color: yellow; position: relative; left: 200px; top: 150px; width: 300px; height: 300px; } .element2{ background-color: green; position: fixed; left: 30px; top: 20px; width: 300px; height: 300px; } </style> </head> <body> <div class="wrap clearfix"> <div id = "id_1"> <span>loremloremloremloremloremloremloremloremloremlorem</span> </div> <br> <div id = "id_1"> <p>loremloremloremloremloremloremloremloremloremlorem</p> </div> <br> <div class = "class_1"> <span>loremloremloremloremloremloremloremloremloremlorem</span> </div> <br> <div class = "class_1"> <p>loremloremloremloremloremloremloremloremloremlorem</p> </div> <div class = "element1"> Hello World! </div> </div> <div class = "element2"> Hello Hello world! </div> </body> </html> | cs |
또한 아래 사이트에서 position과 float, display에 대한 설명을 함께 해주고 있습니다. 설명이나 개념자체가 약간은 어렵게 나와있지만 한번 쯤 읽어보시는 것도 좋을 것 같습니다.
http://blog.wystan.net/2009/01/12/relationships-between-position-float-display
4. z-index, fonts
z-index는 깊이감을 줍니다. 깊이감을 준다는 것이 어떤 디자인적 요소로 깊이감을 준다는 것이 아니고, 쉽게 말해서 요소들간의 위아래를 지정해 주는 것이라고 생각하시면 됩니다. 기본적으로 z-index의 기본값은 0으로 설정되어 있습니다.
숫자가 높을 수록 화면에서 위에 있는 것이고, 음수값도 가능합니다.
예를 들어, A요소가 z-index값을 -3으로 가지고 있고, B요소는 0, C요소는 2로 가지고 있다면 세개의 요소가 겹쳐져 있을 때, C요소가 제일 위에 있을 것이고 그 아래에 B요소, 그리고 A요소가 있을 것입니다.
다음은 웹페이지에서 매우 중요한 폰트입니다.
폰트에 대해서는 직접 외부에서 폰트를 끌어와 사용하는 방식을 설명드리려고 합니다.
바로 진행해보기전에 간단한 개념을 확인해본다면, html에서 글씨체를 나타낼때 serif라는 것은 글씨의 끝(?)부분이 꺾여져있는, 명조체와 같은 글씨체를 말하며 sans-serif는 꺾여져 있지 않은, 즉 고딕체와 같은 글씨체를 말합니다.
수업에서는 google font를 사용하였습니다.
먼저 아래 google font사이트를 접속하여 마음에 드는 폰트를 찾습니다.
저는 가장 처음에 있는 Roboto라는 글씨를 골랐습니다.
자신이 마음에 드는 글씨체를 골랐으면 두께나 크기 등을 적절히 선택합니다.
물론 이는 추후 html에서도 글씨의 크기나 bold와 같은 특징을 설정할 수 있지만 처음에 가져온 폰트를 기준으로 설정됩니다.
글씨체를 골랐으면 글씨체 우측에 있는 + 버튼을 누릅니다. 해당 버튼을 누르면 위의 사진과 같이 - 표시로 바뀔 것입니다.
그리고 화면 우측아래에 검정색 팝업같은 것이 뜰텐데 그것을 누르면 아래사진과 같은 창이 뜨게 됩니다.
그리고 위의 사진과 같이, 1번 @import를 누르고 그 아래에 있는 코드를 복사합니다. 자신의 코드에 style태그가 존재한다면 style태그를 제외한 두번째 줄만 복사하여 자신의 코드 style태그 내부에 붙여넣기 하시면 됩니다.
그리고 이후에 해당 폰트를 사용하기 위해서는 font-family 라는 속성을 사용합니다. 추가적으로 font-family에는 여러개의 폰트를 적용시킬 수 있습니다. 그렇다고 여러개의 글씨체가 랜덤이나, 중복되서 적용되는 것이 아닙니다. 예를 들어, font-family: A, B, C 라고 지정을 해주었다면 먼저 해당 속성이 적용된 곳의 폰트는 기본적으로 A폰트로 적용이됩니다. 그런데 A폰트에서 한글지원을 안하거나 특정한 특수문자를 지원하지 않거나 부득이 하게 해당 폰트가 제대로 불려오지 못했거나 사라진 경우에, A폰트의 적용을 받지 못한 글자는 그 다음인 B폰트의 적용을 받습니다. 따라서 보통 이렇게 외부에서 폰트를 가져오는 경우에는 해당 글씨체와 함께, 해당 글씨체에 대해 제대로 적용받지 못하는 글자나 특수문자를 위해 또 다른 글씨체를 보조적으로 함께 명시해줍니다.
이때, 외부 폰트는 작은 따옴표( ' ' )를 이용하여 명시하고 그렇지 않은 기본폰트는 따옴표를 사용하지 않아도 됩니다.
5. link stylesheet
이번 내용은 지난시간에 알아보았던, css적용 방법 3가지 중에 따로 css파일을 만들어서 link태그로 연결해주는 것에 관한 것입니다.
우리가 그렇게 css를 적용한다는 것은 알았는데 왜 그렇게 할까요?
물론 그 이유에는 다양하겠지만, 몇가지 이유를 생각해본다면, 코드가 복잡해질 때 css코드와 html코드를 분리함으로써 보다 깔끔하게 코드를 유지할 수 있으며 더불어 중복코드를 방지할 수도 있을 것입니다.
또한 css에 대한 내용을 다른 사람에게 비공개로 하고 싶을때 해당 css파일을 암호화시켜서 다른사람들이 볼 수 없게끔 할 수 있습니다.
이렇게 해당 수업에 대한 내용을 한번 정리해보았습니다.
추가적으로 수업에서는 아래와 같은 사이트의 메인화면을 직접 제작해보았습니다.
물론 메뉴가 이동하는 등의 js적인 부분이나 우리가 배우지 않은 제외하고 단순히 메인화면을 보았을 때 나오는 것을 시각적으로만 그대로 따라해보았습니다.
해당 내용에 대해서는 따로 설명을 드리지 않고 코드만 첨부하도록 하겠습니다.
추가적으로 궁금한 점이 있는 분께서는 댓글이나 이메일을 이용해주세요 :)
'LikeLion' 카테고리의 다른 글
| LikeLion at UOS #6_ Cloud9으로 Ruby on Rails 시작하기 (0) | 2018.04.09 |
|---|---|
| LikeLion at UOS #5_ 페이지 제작 실습(2) (0) | 2018.04.02 |
| LikeLion at UOS #4_ jQuery 연습하기 (0) | 2018.03.30 |
| LikeLion at UOS #2_ HTML 태그들과 CSS 기초 (0) | 2018.03.22 |
| LikeLion at UOS #1_ 웹 프로그래밍 시작하기 (0) | 2018.03.21 |