S1 40% review

semin·2023년 4월 17일

section 1

목록 보기

5/11

S1U1 - S1U4

BIL: HTML, CSS 활용

UNIT2

CH1

HTML: 웹 문서의 구조를 표현합니다. 건축 도면과 같습니다.
CSS: 구조적인 문서의 시각적인 부분을 담당하는 스타일시트 언어입니다.
JavaScript: 브라우저에 웹 문서를 표현하는 스크립팅 언어이나
Node.js를 활용한 서버 / PC 앱 / 프로그램 제작용 프로그래밍 언어로 사용됩니다.

CH2

자주 사용되는 HTML elements: div, span, p, a, img, ul, ol, li, header, main, section, footer, article, input, link, aside, button, caption, form, label ......

div: content division, span: content container
따라서 div는 한 줄, span은 콘텐츠 크기만큼 공간을 차지합니다.

ul: unordered list, ol: ordered list(1, 2, 3...)

<ul>
	<li>***</li>
    <li>***</li>
</ul>

<ol>
	<li>111</li>
    <li>222</li>
</ol>

input 요소에는 type을 설정해 사용합니다.

<input type="form">
<input type="button">
<input type="radio">
...

CH3

semantic elements: 네이버, 구글 등의 검색 엔진은 웹페이지들을 방문할 때,
시맨틱 요소를 중요한 키워드로 고려합니다.
즉, 시맨틱 요소에 담긴 의미에 따라 상위 노출이 결정될 수 있습니다.
또한 협업시 div 탐색보다는 의미 있는 코드 블록을 찾는 것이 편리합니다.
(요소 안에 채워질 데이터 유형도 예측하기 쉬움)

id와 class의 차이는 고유성에서 옵니다. class는 반복되는 유형을 분류할 때 사용합니다.

<div id=only>personal name</div>
<section>
	<div class="alphabet">a</div>
    <div class="alphabet">b</div>
    <div class="alphabet">c</div>
    
    <div class="number">1</div>
    <div class="number">2</div>
    <div class="number">3</div>
</section>

UNIT3

CH1

CSS: 좋은 사용자 경험(UX)을 제공하기 위한 도구입니다. UI / layout을 구성합니다.
파일을 따로 생성해 html 파일에 링크합니다.

/* 문법 */
header {
	font-size: 2rem
    color: green
}

body {
	border: 1px solid red
    background-color: rgba(100, 25, 90, 0.5)
   }

CSS to HTML

<head>
	...
	<link rel="stylesheet" href="filename.css">
    ...
</head>

CSS 단위

절대 단위: px, pt ...
상대 단위: em, rem, vw, vh, % ...

CH2

block: <h1>, <p> ... 
inline-block: <span> ... 
inline: <span> ... /* width, height 사용 불가 */

content-box: content width
border-box: border + padding + content width

CH4

selectors

* { 파일 내 모든 요소 }

span {}
section {} /* 같은 태그명을 가진 요소 */
p, div {}

#only { ID }
.alphabet { class }

a[href] { }
p[id="only"] { } /* attribute, 같은 속성의 모든 요소 */
div[class*="w"] { }

header > div { 첫 번째로 입력한 요소의 바로 아래 자식 요소'만' 선택 }
header div { 첫 번째로 입력한 요소의 후손 '모두' 선택 }

section ~ p { 부모 요소 공유, 첫 번째 입력한 요소 뒤의 두 번째 입력 요소 '모두' }
section + p { 부모 요소 공유, 첫 번째 입력한 요소 뒤의 두 번째 입력 요소 '하나만' }

a:link { } /* 사용자가 방문하지 않은 <a>요소를 선택 */
a:visited { } /* 사용자가 방문한 <a>요소를 선택 */

a:hover { } /* 마우스를 요소 위에 올렸을 때 선택 */
a:active { } /* 활성화 된(클릭) 상태일 때 선택 */
a:focus { } /* 포커스가 들어와 있을 때 선택 */

input:checked + span { } /* 체크 상태일 때 선택 */
input:enabled + span { } /* 사용 가능한 상태일 때 선택 */
input:disabled + span { } /* 사용 불가능한 상태일 때 선택 */

p:first-child { } /* <p> 중 첫 번째 자식만 선택 */
ul > li:last-child { } /* <ul> 아래 <li> 중 마지막만 선택 */

...

layout reset
CSS의 default 서식을 제거하고 처음부터 구성하는 것을 추천합니다.
이때 이 기본 스타일을 User-Agent StyleSheet라고 합니다.

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

UNIT4

CH1

wire frame: 만들고자하는 웹 화면의 청사진, 골격을 나타내는 가이드입니다.
아주 단순하게, 레이아웃과 제품의 구조를 보여주는 용도이므로
전환 효과, 애니메이션 등 스타일링 요소나 UX를 판단하는 것이 아닙니다.
와이어프레임을 보고 어떤 목적을 가진 프로그램인지 유추할 수 있습니다.

CH2

flexbox로 레이아웃을 구성합니다. ('유연한 박스'로 레이아웃 설정)

ParentElement {
	display: flex; /* 부모 박스에 적용, 자식 박스의 방향 및 크기 */
	
    flex-direction : /* 자식 요소 정렬축, 기본 가로 정렬 */
    flex-wrap : /* 하위 요소가 상위 요소를 넘어갈 때, 자동 줄바꿈 여부 
    - 기본 설정: nowrap */
    
    justify-content : /* 자식 요소의 축 수평 방향 정렬 방식 */
    align-items : /* 자식 요소의 축 수직 방향 정렬 방식 */
}

ChildElement {
    flex: ( grow(팽창 지수) , shrink(수축 지수) , basis(기본 크기);
    flex: 0 1 auto; /* <-- 기본값 */
}

flex-basis:
CE가 flex-grow나 flex-shrink에 의한 변동 전에 가지는 기본 크기
basis 설정 크기가 항상 유지되는 것은 아닙니다.

flex-grow = 0: basis 크기를 지정하면 값이 유지됩니다.
flex-grow > 0: 속성에 적용한 값보다 커질 수 있습니다.