Session

What is HTML & CSS

HTML

Hypertext Markup Language의 약어로 인터넷 문서를 의미합니다.
HTML의 가장 큰 특징은 링크라고 할 수 있습니다.

(이미지 출처 : wecode)

HTML Tags(기본적인 태그)

<h1>, <h2>, … <h6> - 제목 태그
<a href=“주소”> - 링크 태그
<img alt=“대체 텍스트” src=“이미지 경로”> - 이미지 태그
<p> - 문단 태그
<div> - 자체적인 의미는 없지만 섹션을 나누거나 비슷한 부분끼리 그룹을 짓기 위해 사용하는 태그

Semantic Tags(의미론적인 태그)

(이미지 출처 : wecode)

Semantic tags 이용하는 이유

• 의미부여로 코드 가독성을 높이고 유지보수에 용이함
• 검색 엔진 최적화에 도움이 됨
• 웹 접근성에 도움이 됨

웹 접근성(Web Accessibility)

(이미지 출처 : wecode)

📌Display: flex;

flex는 레이아웃의 시작

Replit

<h1>, <h2>, … <h6> 태그

Heading의 약자입니다.
주로 제목에 사용합니다.

<span> 태그

주로 텍스트에 사용합니다.
줄이 바뀌지 않고 한 줄에 이어서 나오게 됩니다.
이렇게 한 줄에 이어서 나오는 요소를 inline-element라고 합니다.

<p>

paragraph의 줄임말
주로 텍스트에 사용. 문단을 통으로 넣을 때 사용

<p>태그는 <span>태그와 달리 줄바꿈이 일어납니다.

<a>

링크 태그 - 클릭하면 화면이 이동합니다.

<a>태그의 href 속성(attribute)에 이동해야 하는 주소를 써주면 됩니다.
target 속성에 “_blank”값은 클릭하면 새창으로 뜨게 해주는 값입니다.

<div>

division의 줄임말로 웹사이트에서 섹션을 나눌 때 사용합니다.

<div>태그는 다른 태그들과 다르게 자체로 의미가 있지는 않습니다.
비슷한 부분끼리 그룹을 지어주거나 디자인에 맞게 레이아웃을 분리해주거나 각 <div>에 
class나 id라는 attribute를 부여하여 css 스타일을 입혀줄 수 있습니다.

<p>태그와 <span>태그의 차이를 이해하고 다음과 같은 코드를 이름과 직업이 다른 줄에 나올 수
있도록 수정할 수 있습니다.

<span>태그를 <p>태그로 바꾸지 않더라도 <br>태그를 이용하여 줄바꿈을 할 수 있지만 <p>태그
와 <span>태그의 차이를 이해하는 관점에서 변경해주었습니다.
위에서 말했다시피 <span>태그는 inline-element이고 <p>태그는 block-element입니다.

⚠️ Inline-element와 block-element에 대해 잠깐 알아보자면 HTML5 이전에 inline-element와 block-element로 구분 되어왔습니다.
HTML5에 들어서는 태그들을 단순히 인라인, 블록으로 구분하는 것이 아닌 Contents Model로 각 태그별 사용되는 역할에 따라 분류합니다. Contents Model 이기 전에 inline-element와 block-element를 구분 짓는 것들을 알아보겠습니다.

1. 인라인 요소(inline element)

   • 인라인 요소는 다른 인라인 요소를 포함할 수 있습니다.
     
   • 인라인 요소는 다른 블록 요소를 포함할 수 없습니다.
     
   • 인라인 요소는 너비나 높이 값을 줄 수 없습니다.(width, height)

- 대표적인 태그로는 <span>, <a>, <strong>, <em>태그 등이 있습니다.

2. 블록 요소(block element)

   • 블록 요소는 인라인 요소와 다른 일부 블록 요소를 포함할 수 있습니다.
     
   • 예외의 상황으로 p태그에는 또 다른 p태그 뿐만 아니라 다른 블록 요소들이 들어갈 수 없습니다.
     
   • 블록 요소는 너비나 높이 값을 줄 수 있습니다.

- 대표적인 태그로는 <div>, <p>, <h1~h6>, <ul> 등의 태그가 있습니다.

인라인 요소와 블록 요소의 영역이 어떻게 잡히는지에 대한 이미지
(이미지 출처 : https://abcdqbbq.tistory.com)

HTML Attributes

id는 각 태그에 이름을 주는 속성입니다. 웹 페이지에 해당 id 이름은 오직 하나만 가질 수 있습니다.
id는 해당 요소에만 넣고 싶은 디자인을 적용할 때 사용합니다.

class도 태그에 이름을 주는 속성입니다. id와 비슷한 역할이지만, class는 여러 태그에 중복된 이름을 부여할 수 있습니다.

CSS(Cascading Style Sheets)

CSS란 HTML 태그들에 디자인을 입혀주는 것입니다.

css를 작성한 후 HTML에 적용되도록 반영하는 방법에는 3가지가 있습니다.

1. 인라인 스타일

   다음과 같이 style 속성에 직접 작성할 수 있습니다.-빠르고 편합니다.
   -적용해야할 스타일이 많아지면 코드 가독성이 떨어집니다.
   -html 태그와 style 코드가 혼재되어 유지보수에 좋지 않습니다.

2. style 태그

다음과 같이 <style>사이에 css문법을 사용하여 스타일을 작성할 수 있습니다.

-html 파일에 HTML 코드도 작성하고, CSS도 작성하니 편하고 빠른 방법입니다.
-기능적으로(HTML구조와 디자인) 분리되지 않았기 때문에 유지보수에 적합하지 않습니다.

3. css 파일에 작성

   다음과 같이 html 파일과 분리하여 css 파일에 따로 작성할 수 있습니다.-html 파일에서 어느 css 파일이 쓰였는지 브라우저에 알려야 하므로 링크를 해주는 태그를 추가해야 합니다.
   -link 태그로 사용할 css 파일 경로를 작성해줍니다.
   -href 속성에 css 파일 경로를 작성합니다.
   -type 은 link 태그로 연결되는 파일이 어떤 것인지 알려줍니다.
   -rel은 .html과 .css의 관계를 설명하는 속성입니다. css 파일을 링크할 때는 항상 “stylesheet”값을 대입해줍니다.

CSS 작성법

color는 property(속성)이라고 하고 red는 속성 값입니다.
selector(선택자)는 여러 종류가 올 수 있습니다. 태그 이름도 올 수 있고 class 이름도, id 이름도 올 수 있습니다.
selector가 태그일 때는 단순히 태그 이름만 적어주어도 되지만 다음과 같이 profile-detail 클래스에 디자인을 적용하고 싶을 때에는 클래스 앞에 .(dot)을 찍어주어야 합니다.id에 디자인을 적용하고 싶을 때에는 #이 필요합니다. 다음과 같이 profile id에 디자인을 적용하고 싶을 때에는 id 앞에 #을 붙어야 합니다.

[CSS] Font Style

font family

font-family는 폰트 스타일을 지정하는 속성입니다.위 코드는 브라우저가 Georgia 라는 폰트를 지원해주면 Georgia 폰트로 적용, Georgia 폰트가 지원되지 않으면, “Times New Roman”을 적용, 이것도 지원되지 않으면 TImes를 적용, 앞의 세 가지 폰트가 전부 없으면 serif라는 폰트를 사용하겠다는 뜻입니다.
⚠️”Times New Roman”만 “”(쌍따옴표)로 감싸져 있는데 폰트 이름에 띄워쓰기가 되어있으면 “”(쌍따옴표)를 사용해야 합니다.
사용자가 어떤 브라우저를 사용할지 모르기 때문에 font-family 값에는 보통 여러가지 폰트를 나열합니다. 가장 뒤에 위치한 serif 같은 폰트는 모든 브라우저에서 지원하는 폰트입니다.

font size

font-size는 폰트의 크기를 지정해 줍니다.위에 코드는 font-size를 50px로 지정했습니다.
폰트 크기 단위는 ‘px’, ‘em’, ‘pt’등 여러가지가 있습니다.

font weight

font-weight는 글씨 두께를 조절하는 property입니다.위의 코드는 글씨 두꼐를 bold로 지정했습니다.

• normal, bold, 100, 200, … 900 등의 값이 지정될 수 있습니다.
• 숫자 400과 normal은 같은 두께입니다.
• 숫자 700과 bold는 같은 두께입니다.
• 보통은 두껍거나 아니거나 두가지 경우면 되므로 간편하게 bold 값을 지정합니다.

font style

font-style을 이용하여 글씨 스타일을 바꿀 수 있습니다.위의 코드는 글씨 스타일을 이탤릭체로 지정했습니다.

color

color를 이용하면 글씨 색깔을 바꿀 수 있습니다.위의 코드는 pink 클래스에는 글씨 색깔을 핑크색으로 yellow 클래스에는 글씨 색깔을 노란색으로 지정했습니다.
색상을 표현하는 방법에는 여러가지가 있습니다.

• pink, yellow처럼 텍스트로 누구나 알아보기 쉬운 색깔을 지정할 수 있습니다.
• hex 색상코드를 사용할 수 있습니다. ex)#eb4639
• rgb 값을 사용할 수 있습니다. ex)rgb(235, 70, 57)
• hsl로도 사용할 수 있습니다. ex)hsl(4, 82%, 57%)위 세가지는 모두 같은 색입니다.

[CSS] Text Style

text-align

text-align은 텍스트 정렬을 나타내는 속성입니다.
값으로는 left, center, right가 있습니다.위의 코드처럼 텍스트를 정렬시킬 수 있습니다.

• 모든 요소의 기본 정렬은 왼쪽 정렬입니다.
• text-align으로 정렬을 설정하지 않으면 left로 정렬되어 나타납니다.
• span태그와 같이 inline-element는 text-align을 이용하여 오른쪽 정렬을 하여도 텍스트 만큼의 영역만을 차지하고 있기 때문에 정렬이 되지 않습니다.

indent

text-indent를 이용하여 css로 들여쓰기를 할 수 있습니다.위의 코드처럼 text-indent를 이용하여 js-description class를 50px만큼 들여쓸 수 있습니다.

참고1) blockquote 태그는 인용구문을 넣을 때 쓰는 태그입니다. blockquote 태그를 사용하면 양쪽 여백을 넣는 기본 스타일이 적용됩니다.

참고2) html 코드 내에서는 아무리 스페이스와 엔터를 추가하여도 실제 결과 화면에서는 적용이 되지 않습니다. 문장 사이사이에 스페이스를 추가하고 싶을 때에는 스페이스를 의미하는 "& n b s p;"를 넣으면 스페이스를 적용시킬 수 있습니다. 또 엔터를 추가하고 싶을 때에는 br 태그를 추가하여 줄바꿈을 할 수 있습니다.

[CSS] Margin & Border & Padding

위의 사진을 보면 content와 margin, border, padding이라는 property를 이해하실 수 있습니다.
모든 요소는 margin, border, padding의 스타일을 갖고 있습니다.
border에 스타일을 주면 테두리가 그려지고 padding은 border 안에 생기는 영역이고 margin은 border 외부에 생기는 여백입니다.위의 코드처럼 margin에 50px의 값을 주게 되면 content의 사방에 50px의 영역이 생깁니다. 위의 css를 풀어쓰면 아래와 같습니다.순서대로 위, 오른쪽, 아래, 왼쪽의 여백 값을 표시하게 됩니다. 한번 더 풀어쓰면 아래와 같습니다.padding도 위의 코드와 동일한 순서가 적용됩니다.

Border은 위에서 말했다시피 content의 테두리라고 생각하면 좋습니다. border도 margin과 padding처럼 아래처럼 순서가 있습니다.사실 border의 순서는 중요하지 않습니다. 그래도 전세계적으로 약속된 coding convention(코딩 규칙)에 따라 순서를 맞춰주는 것이 좋습니다.
border의 선스타일 종류

• dotted
• dashed
• solid
• double
• groove
• ridge
• inset
• outset
  이 중에 거의 solid만 사용하지만, 혹시 다른 선 스타일도 사용할 경우가 있으니 다양한 스타일이 있다는 것만 알아두시면 좋겠습니다.위의 코드처럼 선 또한 윗선, 오른쪽선, 아래선, 왼쪽선 등 다양하게 스타일을 줄 수 있습니다.
  하지만 이렇게 다양하게 border 디자인을 하지 않습니다.
  대신에 테두리를 분리하여 스타일할 경우는 많이 있습니다.
  밑줄을 쳐주는 스타일인 text-decoration: underline; 을 이용하게 되면 밑줄의 두께나 색깔 등 완벽하게 커스터마이징 하기가 어렵습니다.
  이럴 때는 border-bottom으로 내가 원하는 스타일로 밑줄을 칠 수 있습니다.
  내가 원하는 대로 디자인할 수 있으니 대부분의 개발자는 border-bottom으로 구현하는 것을 선호합니다.
  알아두시면 좋겠죠?

[CSS] box-sizing

위의 코드는 순서대로 .html .css입니다.
위의 코드대로 만들어진 화면을 보게 되면 다음과 같습니다.똑같이 width 값을 300px로 설정하였는데 화면은 그렇지 않습니다.
그 이유는 양쪽으로 border 10px이 추가되었고, padding이 50px씩 추가되어서 420px이 되었습니다.
이런 특성을 파악하고 코딩을 하면 딱히 문제가 없겠지만 디자인 시안에는 컴포넌트의 가로값만을 알 수 있는데, 디자인만 보고 코딩하려면 머리 속으로 padding을 계산해가며 최종적으로 width가 얼마인지 안 후에 css를 적용하는 일이 발생하게 됩니다.
이러한 특성이 불편하다는 것을 깨닫고 새로운 CSS property를 만들었습니다.이와 같이 보이는 대로 width 값을 주고 그 후에 그 안 쪽으로 padding 값을 주는 것이 생각하기에 쉽습니다.
이러한 이유 때문에 거의 대부분의 웹페이지에 box-sizing이 기본적으로 적용됩니다.
또한, 모든 태그에 이 프로퍼티가 적용되어야 하는데 일일이 태그마다 적용하기에는 코드가 길어지겠죠?
그래서 아래와 같은 * selector로 모든 태그에 적용할 수 있습니다.

상속, 그룹

상속(Inheritance)

상속은 css가 가진 특성입니다.
말 그래도 스타일이 상속되어 자식에게도 같은 스타일이 적용된다는 의미입니다.위와 같은 html과 css 코드가 있습니다. 위 코드로 이루어진 웹페이지를 열게 되면 아래와 같습니다.body라는 태그에 color는 빨간색으로, 크기는 14px로 스타일했습니다.
그런데 p 태그는 아무 스타일도 갖고 있지 않는데 부모인 body 태그의 영향을 받아서 빨간색과 14px로 변경되었습니다.
blockquote 태그 또한 14px이 적용되었습니다.
부모에게 "color: red;"라는 속성이 있더라도 본인의 요소가 해당 속성을 갖고 있다면 본인의 스타일이 적용됩니다.
javascript 클래스의 부모(blackquote)는 "color: black:"을, 하나 더 위의 부모(body)는 "color: red;" 속성을 가졌지만, 본인도 color 속성을 갖고 있으므로 파란색이 됩니다.

그룹(Grouping)

이 태그, 저 태그, 이 클래스에 같은 스타일을 적용하고 싶으면 어떻게 해야 될까요?
그럴 때 각자의 selector에 모두 똑같은 스타일을 적기보다는 다음과 같이 한꺼번에 스타일을 지정할 수 있습니다.이것이 그룹화입니다.