본문 바로가기
SSAFY

[수업기록] Web : HTML & CSS 기초 개념

by 주니코니 2024. 8. 19.

240819

1) Web이란?

-World Wide Web : 인터넷으로 연결된 거대한 공간 - > www.

-웹 : 웹사이트, 웹 어플 등 사용자들이 정보를 검색하고 상호작용하는 기술

-웹 사이트 : 여러개의 웹 페이지가 모인 것

-웹 페이지 : 웹사이트를 구성하는 가장 작은 단위, HTML 및 CSS 등의 웹 기술로 만들어진 

 

2) Web page 구성 요소

-HTML : 뼈대, 구조-CSS : 스타일링-상호작용 행동 : 자바스크립트

 

3) 웹 구조화

-HTML : hypertext Markup Language, 웹 페이지의 의미와 구조를 정의하는 언어

-Hypertext : 웹 페이지를 다른 페이지로 연결하는 링크(참조, 비선형성 : 무조건 1페이지 -> 2페이지로 가지 않는 것처럼)

-Markup Language : 태그 등을 사용하여 문서나 데이터의 구조를 명시하는 언어 -> HTML, Markdown

 

4) HTML 구조

<!DOCTYPE html> : 이거 html로 작성된거야. 알리는 부분

<html></html> : 전체 페이지의 콘텐츠를 포함

<head></head> : 사용자에게 보이지 않음, 컴퓨터가 식별하는 데이터를 작성 

<body></body> : 페이지에 표시되는 모든 콘텐츠를 작성 -> 한 문서에 하나의 body 요소만 존재

 

-일반적으로 들여쓰기는 두칸

-open in browser 확장 프로그램 설치하면 vs code에서 바로 시각화 가능(alt+b : 시각화)

5) HTML 요소

-태그 - 콘텐츠(내용)로 이루어짐

-닫는 태그는 앞에 / 명시

-닫는 태그가 없는 경우도 있다(콘텐츠가 없으면 닫는 태그가 없다!)

-속성 : 태그에 추가적 기능, 내용 담고 싶을 때 사용

*속성 작성 규칙 : 속성 요소 이름과 속성 사이 공백 있을 것. 하나 이상 속성의 경우 속성 사이 공백으로 구분(HTML은 ,가 아닌 ' '을 지원한다.)

 

- a 태그 : 하이퍼텍스트 기능 -> ex. 구글 홈에서 드라이브, 메일 등 바로가기 기능 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>My Page</p>
  <a href="https://www.google.co.kr/?hl=ko">하이퍼텍스트</a> 
</body>

</html>

 

 

 

- src: 이미지 소스(외부에서 가져온)

- alt : 이미지 출력 안될 경우 어떤 이미지였는지 대체 텍스트

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <p>My Page</p>
  <a href="https://www.google.co.kr/?hl=ko">하이퍼텍스트</a> 
  <img src="images/sample.png" alt="">
</body>

</html>

 

-일부러 잘못 적어서 alt 역할보기(귀찮더라도 alt값 넣어주기!)

<body>
  <p>My Page</p>
  <a href="https://www.google.co.kr/?hl=ko">하이퍼텍스트</a> 
  <img src="images/sample.pndg" alt="컴퓨터">
</body>

</html>

실행 결과

 

6) 텍스트 구조

-HTML : 구조뿐만 아니라 의미를 정의한다?! 

*대표적으로 h1이라는 태그의 고유한 의미는 글자 크기를 크게 + 문서 최상위 제목이란 의미 부여

- 마크다운이 여기서 구조를 따간 것임(#갯수)

 

* 그럼 h1 두개를 쓰면 하나만 인지할까? 실행결과를 봐보자

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>대제목</h1>
  <h1>대제목</h1>
  <h2>중제목</h2>
  <p>My Page</p>

  <a href="https://www.google.co.kr/?hl=ko">하이퍼텍스트</a> 
  <img src="https://picsum.photos/200/300" alt="컴퓨터">
</body>

</html>

 

실행 결과

아니다! 그래서 개발자들은 h1은 한번만 쓰기로 약속을 했다

 

 

그리고 다른 태그들 종류가 ....

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>대제목</h1>
  <h1>대제목</h1>
  <h2>중제목</h2>
  <p>My Page</p>
  <p><strong>this</strong> is <em>emphasis</em></p>

  <ol>
    <li>파이썬</li>
    <li>알고리즘</li>
    <li>웹</li>
  </ol>

  <ul>
    <li>파이썬</li>
    <li>알고리즘</li>
    <li>웹</li>
  </ul>
  <a href="https://www.google.co.kr/?hl=ko">하이퍼텍스트</a> 
  <img src="https://picsum.photos/200/300" alt="컴퓨터">
</body>

</html>

실행결과

*ol  : 순서가 있는 목록들 

*ul : unordered list 순서가 없는 목록들, 하이퍼링크(네비게이션 바) 만들 때 자주 씀

 

7) CSS == 스타일링!

-웹 페이지의 디자인, 레이아웃, 배치를 구성하는 언어

-세미콜론(;) : 종료 선언

8) CSS 적용방법 

1) 인라인 스타일 : HTML 요소 안에 style 속성값으로 작성 -> 단점 : 가독성이 안좋다

2) 내부(internal) 스타일 : head 태그 안에 style 태그에 작성 -> 일반적 방법 💛

3) 외부 스타일 : 별도 CSS 파일 생성 후 HTML link 태그 사용해 불러오기 -> 장점 : 확장성이 크다 💛

 

 

9) CSS '선택'자

-기본 선택자

1) 전체(*) 선택자 : HTML 모든 요소를 선택

2) 클래스(class) 선택자 : 

3) 아이디(id) 선택자 :

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>


    /*클래스 선택자*/
    .green {
      color: green;
    }

    /*아이디 선택자*/
    #purple {
      color: purple;
    }
  </style>
</head>

<body>
  <h1 class="green">Heading</h1>
  <h2>선택자</h2>
  <h3>연습</h3>
  <h4>반가워요</h4>
  <p id="purple">과목 목록</p>
  <ul class="green">
    <li>파이썬</li>
    <li>알고리즘</li>
    <li>웹
      <ol>
        <li>HTML</li>
        <li>CSS</li>
        <li>PYTHON</li>
      </ol>
    </li>
  </ul>
  <p class="green">Lorem, <span>ipsum</span> dolor.</p>
</body>

</html>

실행 결과

 

-결합자

1) 자손 결합자(첫번째 요소의 모든 자손 요소들 선택" ")

2) 자식 결합자(첫번째 요소의 직계 자식만 선택 >)

10) 명시도

-같은 선택자의 가중치가 같다면 선언순서로 판단(마지막에 작성된 선언이 사용됨)

-명시도 높은 순 : 

! important(따봉) > 인라인 스타일 > 선택자(id 선택자 > class 선택자 > 요소 선택자) > 소스 코드 선언 순서

-그러나 왜 웹개발시 90% 이상 클래스 선택자를 사용할까? 

*우선 id 선택자는 요소 1개에만 적용됨. class 선택자는 여러번 재활용 가능.

 

11) CSS 속성

-상속되는 속성 : 텍스트 관련 요소

-상속되지 않는 속성 : 배치나 박스 모델(박스의 높이, 크기 등) 관련 요소

 

 

12) 박스 모델

-HTML의 모든 요소는 사실 모두 네모의 형태를 띈다. 💛

-웹을 만들 때 항상 좌측 상단부터 만드는데 ..

-block이냐 inline이냐

*block은 inline 방향으로 사용 가능 공간을 다 차지함, 상하방향

*inline : 본인 콘텐츠 만큼만 차지, 좌우방향

 ! 웹개발은 MDN Web Docs 늘 참고해서 개발하자 !

'SSAFY' 카테고리의 다른 글

[수업기록] Web : Bootstrap  (0) 2024.08.21
[수업기록] Web : CSS Box Model, CSS position, CSS Flexbox  (0) 2024.08.20
[swea 파이썬] 10761. 신뢰  (0) 2024.08.18
[swea 파이썬] 6485. 삼성시의 버스 노선  (0) 2024.08.18
[수업기록] 알고리즘 : 문제풀이  (1) 2024.08.16

관련글

티스토리툴바