www.boostcourse.org/web344/joinLectures/78637
웹 UI 개발
부스트코스 무료 강의
www.boostcourse.org
매번 CSS와 HTML을 다룰때마다 '이게 왜 배치가 안되지??' 라고 생각하며 어려워했었습니다.
이번 프로젝트를 통해 전반적으로 어떻게 배치해야 하는지 감을 잡은거 같네요.
과제에서 디자인 가이드 파일을 주는데, 이를 토대로 최대한 비슷하게 구현하는게 과제였습니다. 자세한 내용은 수강신청을 하여 보실 수 있습니다. (무료)
리뷰 #1
의견을 봤습니다. 피드백을 해주셨습니다.
그런데 잉, 루브릭이 뭘까요?
루브릭
(Rubric)은 학습자가 과제를 수행할 때 나타내는 반응을 평가하는 기준의 집합이다. 보통 항목별·수준별 표로 구성되며, 표의 각 칸에는 어떤 경우에 그 수준에 해당되는지를 상세히 기술되어 있다.
여기에서는 과제로 주어진 가이드 라인을 말하는 거 같네요.
다음과 같이 리뷰어분께 메모를 남길 수도 있습니다.
답변으로 CSS디자인에는 회사 내부 컨벤션에 맞게 BEM, SMACSS, OOCSS 방법론 중 하나가 쓰인다고 하네요.
OOCSS(Object Oriented CSS) - 중복을 최소화하고, 캡슐화를 원칙으로 하는 방법론
- 구조와 모양을 분리 => 버튼, 박스, 스킨.. 등등
- 컨테이너와 컨텐츠를 분리 => 버튼과 레이아웃이 같이 묶여 있는 클래스가 있으면, 각각 같은 속성을 포함하는 버튼 클래스, 레이아웃 클래스로 나누기.
단점: 다중 클래스 사용으로 유지보수, 가독성이 떨어질 수 있다.
SMACSS(Scalable and Modular Architecture CSS)
5가지 범주: 기본(base), 레이아웃(layout), 모듈(module), 상태(state), 테마(theme)
기본(base): Reset.css를 생각하면 되는듯하다.
레이아웃(layout): 레이아웃과 관련된 스타일을 정의한다. "l-" 접두사를 사용
ex) .l-width { }
모듈(module): 스타일 재사용 가능한 구성요소.
ex) .class / .class-name / .class-number
상태(state): 요소의 상태 변화를 표현. "is-" 또는 "s" 접두사를 사용
ex) .btn / .btn.is-active / .btn.is-hidden
테마(theme): 기존 스타일을 재선언하여 사용. 적용범위가 넓은 테마는 "theme-" 접두사를 사용
ex) .nav{ color:blue } / .nav {color: red}
BEM(Block Element Modifier)
이름은 블록(Block), 요소(Element), 상태(modifier)을 의미. 각각에 맞춰서 클래스 명을 작성해야한다.
블록(Block): 요소(Element)를 담고 있는 컨테이너, header, nav, footer 등등을 하나의 단어로 사용
ex) .header {} .block {}
요소(Element): 블록(Block)의 내부 구성을 표현. "__" 를 사용.
ex) .header {} / .header__logo {} / .header__link {} / .header__tap__item {}
상태(modifier): 블록(Block) 또는 요소(Element)의 외관이나 상태의 변화. "--" 또는 "__"를 사용
ex) .header__navigation {} / .header__navigation‐‐secondary {}
"-"만 사용하는줄 알았는데, "__" 두개를 사용하는것도 있고, 다양하네요. 다음 프로젝트에 적용해봐야겠습니다,
참고링크:
1. jinminkim-50502.medium.com/css-bem-smacss-oocss-9e4d6beb0a38
2. wit.nts-corp.com/2015/04/16/3538
Advice
CSS리셋을 사용하자.
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
...CSS Reset이라는 것도 있었네요. 위 코드는 에릭마이어의 CSS Reset이라 불리는 코드입니다.
링크: meyerweb.com/eric/tools/css/reset/
CSS Tools: Reset CSS
CSS Tools: Reset CSS The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. The general reasoning behind this was discussed in a May 2007 post, if you're inter
meyerweb.com
IMG 태그의 alt 속성을 알맞게 지정하자.
alt 속성
HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값이다. HTML의 img 태그에서 쓰이는 alt 속성은 그림이 렌더링되지 못할 때 나타날 문자열을 지정하기 위한 값이다.
-위키-
원래 사이즈를 적어놨었는데, 글의 제목으로 alt값을 변경하였습니다.
Label 태그와 input을 사용시 element_id값을 for속성의 값으로 넣어주자
<!DOCTYPE html>
<html>
<body>
<h1>The label element</h1>
<p>Click on one of the text labels to toggle the related radio button:</p>
<form action="/action_page.php">
<label for="male">Male</label>
<input type="radio" name="gender" id="male" value="male"><br>
<label for="female">Female</label>
<input type="radio" name="gender" id="female" value="female"><br>
<label for="other">Other</label>
<input type="radio" name="gender" id="other" value="other"><br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
www.w3schools.com/tags/tag_label.asp
SELECT 태그에 적절한 NAME속성을 넣어주자
<select name="cars" id="cars">
<optgroup label="Swedish Cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
</optgroup>
<optgroup label="German Cars">
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</optgroup>
</select>
www.w3schools.com/tags/tag_select.asp
찾아보니 optgroup 태그도 있었습니다.
'교육' 카테고리의 다른 글
| 프로젝트 B. 프로모션 웹페이지 만들기 - 코드 리뷰 및 회고(웹 UI 개발) (0) | 2021.03.11 |
|---|---|
| 2020년도 산림빅데이터 전문가 양성교육 참여 후기 (0) | 2020.07.18 |
| ICT 학점연계 인턴십 인턴 후기 (고미코퍼레이션) (0) | 2020.07.10 |
