[TIL] 엘리스 SW 엔지니어 트랙 2기 day 02

✏️ Today I Learned (2022.04.05)

---

📖 온라인 강의

1. 웹사이트의 정보와 디자인
2. 웹사이트 레이아웃에 영향을 미치는 요소

---

📝웹사이트의 정보와 디자인

**앞부분이랑 중복되는 부분은 생략했다

웹을 구성하는 요소

웹 구성 요소

웹 제작 시 고려 사항

1. 웹 표준: 웹사이트를 작성할 때 따라야 하는 공식 표준이나 기술 규격
2. 웹 접근성: 장애의 여부와 상관없이 모두가 웹사이트를 이용할 수 있게 하는 방식
3. 크로스 브라우징: 모든 브라우저 또는 기기에서 사이트가 제대로 작동하도록 하는 기법

<p> 태그: paragraph의 약자로 본문 내용을 표현합니다.

 

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

웹사이트의 중요 정보를 담는 태그로, 나타내고자 하는 내용을 열린 태그와 닫힌 태그 사이에 입력

구조를 잡을 때 사용하는 태그

웹사이트의 목차를 담당하는 <header>, <nav> 태그

<header> <!-- 상단 영역 -->
    <nav> <!-- 메뉴 영역 -->
        ...
    </nav>
</header>

• <header> 태그: 웹사이트의 머리글을 담는 공간
• <nav> 태그: 메뉴 버튼을 담는 공간 (navigation)으로 <ul>, <li>, <a> 태그와 함께 사용

웹사이트의 본문을 담당하는 <main>, <article> 태그

<main role="main"> <!-- 본문 영역 -->
    <article> <!-- 정보 영역 -->
        <h#></#h>
        ...
    </article>
</main>

• <main> 태그: 문서의 주요 내용을 담는 태그 (Internet Explorer는 지원하지 않으므로 role="main" 속성 필수 입력)
• <article> 태그: 문서의 주요 이미지나 텍스트 등의 정보를 담고 구역을 설정하는 태그로, 태그 내 구역을 대표하는 타이틀 <#h> 태그가 존재해야 함.

웹사이트의 부록을 담당하는 <footer> 태그

<footer> <!-- 하단 영역 -->
    <div> <!-- 홈페이지 정보 -->
        <p></p>
        <p></p>
    </div>
    <div> 
        <p></p>
        <p></p>
    </div>
</footer>

• <footer> 태그: 가장 하단에 들어가는 정보를 표기할 때 사용
• <div> 태그: 임의의 공간을 만들 때 사용

HTML 태그의 성격

Block 요소

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

• y축 정렬 형태로 출력 (줄바꿈 현상이 있음)
• 공간을 만들 수 있고, 상하 배치 작업 가능

Inline 요소

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• x축 정렬 형태로 출력 (한 줄에 출력)
• 공간을 만들 수 없고, 상하 배치 작업 불가능

CSS

CSS는 Cascading Style Sheet의 약자로, HTML로 작성된 정보를 꾸며주는 언어입니다.

CSS 구성 요소

선택자 { 속성 : 속성값; }

• 선택자: 디자인을 적용할 HTML 영역
• 속성: 어떤 디자인을 적용할지 정의
• 속성 값: 어떤 역할을 수행할지 구체적으로 명령

CSS 속성 (Property)

h1 {
    font-size: 20px; /* 폰트 사이즈 */
    font-family: sans-serif; /* 글꼴 */
    color: blue; /*폰트 색깔 */
    background-color: yellow; /* 배경색 */
    text-align: center; /* 텍스트 정렬 */
}

CSS 연동 방법

 

Inline Style Sheet: 태그 안에 직접 원하는 스타일 적용

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

Internal Style Sheet: <style> 태그 안에 넣기

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

External Style Sheet: <link> 태그로 불러오기

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• html, css 각각의 문서 안에서 따로 관리하여 상대적으로 가독성이 높고 유지보수가 쉬움

CSS 선택자

Type Selector: 특정 태그에 스타일 적용

 

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

Class Selector: 클래스 이름으로 특정 위치에 스타일 적용

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

ID Selector: ID를 이용해 스타일 적용

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

부모 자식 관계

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• <header>와 <h1> <p>: 부모 자식 관계
• <h1>과 <p>: 형제 관계
• 원하는 지역에만 css 속성을 적용하기 위해 부모를 구체적으로 표기

캐스케이딩

CSS의 우선순위를 결정하는 세 가지 요소

1. 순서
나중에 적용한 속성 값의 우선순위가 높음

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

2. 디테일
더 구체적으로 작성된 선택자의 우선순위가 높음

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

3. 선택자
style > id > class > type 순으로 우선순위가 높음

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

CSS 주요 속성

width, height

<p class="paragraph"> 프로그래밍을 배워봐요! </p>

.paragraph { width: 500px, height: 500 px; }

• .width 속성: 선택한 요소의 넓이를 설정
• .height 속성: 선택한 요소의 높이를 설정
• 고정값은 px, 가변 값은 %로 표기

font

 

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• .font-family: 브라우저마다 지원하는 폰트가 다름. 입력한 순서대로 우선순위 적용. sans-serif는 모든 브라우저에서 지원 가능하기 때문에 마지막에 작성하는 디폴트 값.
• .font-weight: 100-900 사이의 숫자를 입력할 수도 있음.

border

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• .border-style: 실선은 solid, 점선은 dotted로 표기
• 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)

background

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

• .background-repeat: x축으로 반복은 repeat-x, y축으로 반복은 repeat-y, 반복하지 않은 경우 no-repeat으로 표기
• .background-position: 공간 안에서 이미지의 좌표 변경 (top, bottom, center, left, right 등)
• 주석과 같이 한 줄에 이어 쓸 수도 있음. 이때, 쉼표는 작성하지 않고 띄어쓰기만 함 (순서 상관 X)

---

📝웹사이트 레이아웃에 영향을 미치는 요소

 

박스 모델

margin과 padding의 차이

<style>
    div {
    ...
    margin-left: 100px; 
    padding-left: 100px;
    }
</style>

• .margin-left: border 바깥쪽에서 왼쪽에 여백을 만듦
• .padding-left: border 안쪽에서 왼쪽에 여백을 만듦
• top, right, bottom, left에 여백을 만들 수 있음
• 공간이 여백을 포함한 크기로 변경되는 점 유의

top right bottom left 순서로 한 줄에 작성 가능

<style>
    div { margin: 100px 0 0 100px; }
</style

 

Block 요소와 Inline 요소

Block 요소의 특징

<style>
    p {
        width: 200px;
        height: 200px;
        margin-top: 100px;
    }
</style>

• <p> 태그가 대표적
• 줄 바꿈 현상이 나타남
• width/height 값 사용 가능 (공간 만들기 가능)
• margin과 padding 값 사용 가능 (상하 배치 작업 가능)

Inline 요소의 특징

• 줄바꿈 현상 없음
• width/height 값 적용 불가
• margin /padding /bottom 값 적용 불가

마진 병합 현상

형제지간의 마진 병합: margin-bottom과 bottom-top 중 숫자가 큰 값으로 적용

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

부모 자식 간의 마진 병합: 자식뿐만 아니라 부모에도 영향을 미침

<main role="main">
    <article>
    </article>
</main>

article {
    width: 200px;
    height: 200px;
    margin-top: 100px;
}

• 자식인 <article>뿐만 아니라 부모인 <main>에도 영향을 미침

레이아웃에 영향을 미치는 속성

display: Block과 Inline 요소의 성격을 바꿀 때 사용

p { display: inline; }
a { display: block; }
a {display: inline-block; }

• inline-block을 사용하면 두 요소의 성격을 모두 가짐

float: 선택된 요소를 왼쪽 끝 혹은 오른쪽 끝에 정렬시키고자 할 때 사용. 이름 그대로 선택자를 띄워 새로운 레이어층을 만드는 것

See the Pen Untitled by 조재홍 (@h0ng95) on CodePen.

 

 

clear: float에 대한 속성을 제어하고자 할 때 사용

<header></header>
<aside class="left">Hello World</aside>
<main></main>
<aside class="right">Hello World</aside>
<footer></footer>

footer { clear: both; }

브라우저와 공간 사이의 공백 제거하기

<style>
    html, body {
        margin: 0;
        padding: 0;
    }
</style>

• <html>과 <body> 태그는 margin과 padding 값을 가지므로 초기화를 해주어야 함

<style>
    * {
        margin: 0;
        padding: 0;
    }
</style>

• 혹은 *로 모든 html 태그 선택 가능

---

💡느낀 점

온라인 강의.. 실강 때 가르쳐준 것이랑 반복되는 것이 많았다. 정리를 한다고 해봤는데  TIL을 처음 해보는 거라 중복되는 거 제외하곤 거의 다 쓴 거 같다. 점점 나아지겠지...