TIL_240125

라미·2024년 1월 25일
TIL학습일지

TIL

목록 보기
1/25
post-thumbnail

TIL_1일차

학습환경

  • VS Code
  • VS Code Extension

    • [ HTML/CSS ]

      • LIVE SERVER : 실시간으로 서버를 오픈하여 확인
      • Auto Close Tag : 태그의 중첩 구조를 명확하게 파악하여 문법적인 오류를 방지하고, 코드의 일관성을 유지하는 데 도움을 줍니다.
      • Auto Rename Tag : HTML/XML 태그의 이름을 자동으로 변경
      • HTML End dTag Labels : Html 태그의 종료 태그를 시각적으로 표시
      • indent-rainbow : 들여쓰기를 시각적으로 표시, 코드 구조 파악에 용이
      • Bracket Pair Color DLW : 괄호(브래킷) 쌍을 시각적으로 구분하여 표시

    • [ 파이썬 / SQLite / Flask ]

      • Python : Python 언어 지원, 개발 환경 향상
      • autopep8 : Python 코드 포맷팅 자동 조정
      • SQLite : SQLite 지원 도구
      • Flask-snippets : Flask를 쉽게 사용할 수 있도록 자동 완성 제공

HTML/CSS

HTML이란?

  • 웹브라우저를 통해 표시되는 웹페이지의 콘텐츠를 정의하기 위해 사용하는 언어.
    • 🧑🏻‍💻개발자 HTML 문서 생성 - 🌐 웹브라우저가 로딩 (해석,표현) - 📄 웹페이지
    • HTML 문서가 웹브라우저를 통해 해석, 표현되는 과정 → 렌더링
<!--HTML 문서 기본구조-->
<!DOCTYPE html>
<html>
    <head> <!--<head> : 페이지 속성정보 작성 -->
        <meta charset="utf-8">
        <title>문서의 제목을 쓰는 곳</title>
    </head>
    <body> <!--<body> : 페이지 내용 작성 --> 
        브라우저 화면에 표시할 내용을 작성하는 곳
    </body>
</html>

HTML 텍스트 요소

<body>
  <h1>H1 제목 크기</h1>
  <h2>H2 제목 크기</h2>
  ...
  <h6>H6 제목 크기</h6>
  <p>단락</P>
  <P>줄나누기<br>
     입니다.<br />
     띄어쓰기&nbsp;&nbsp;&nbsp;입니다</p>
  <pre>
  텍스트 서   식  을
  그대로
  출              력
  </pre>
  <p>단락</p>
  <hr>
  <p>단락</p>
  <hr>
  <p>단락</p>
</body>
  • 섹션의 제목을 표현하는 태그
    • < h1 >~< h6 > 까지 존재. (제목크기 : h1>h6)
  • < p > vs < br >
    • < p >~< /p > : 내용을 구분 할 수 있는 하나의 단락, 문단.
    • < br > : 시각적으로 단순히 줄을 바꿔주는 기능. (무분별하게 남용x)
  • < pre >~< /pre > : 텍스트 서식 미리 정의하기.
    • < pre >태그 내에서 작성한 텍스트의 모든 띄어쓰기와 줄 나누기는 웹 브라우저에 표현된다.
  • < hr > : 수평선 태그
    • 단락을 나누거나 내용상의 구분을 표현할 때 사용.

서식/인용구

<p><b>이부분</b>은 단순히 글씨가 굵은 부분!</p>
<p><strong>이부분</strong>은 내용이 중요해서 굵게 표현!</p>
<p><i>이부분</i> 단순히 글씨가 이텔릭체!</p>
<p><em>이부분</em> 내용이 중요한 부분이라 이탤릭체</p>
<p><mark>이부분</mark> 하이라이팅(형광펜) 효과~</p>
<p><del>이부분</del> 삭제 효과~</p>
<p><ins>밑줄 친 부분</ins> 삽입 한 것 같은 효과~</p>
<p><sup>위첨자</sup> 글씨가 위로~</p>
<p><sub>아래첨자</sub> 글씨가 아래로~</p>
  • <em>,<strong> : 내용적인 중요함 나타내줌
    • em : 내용을 강조하기 위해 사용
    • strong : 내용이 중요함을 표시
    • 둘 다 내용의 중요함 나타냄, 문맥에 따라 사용자가 선택해서 사용할 것.
  • < i >, < b > : 특별한 의미 없이 시각적인 효과.
    • i 와 em, b와 strong 요소는 웹페이지 상에 동일하게 보이지만 그냥 특별한 의미 없이 단순 시각적인 효과.
    • < i > 요소의 가장 주된 기능은 이텔릭체 표현
  • < sup >, < sub >
    • < sup > : 위첨자(superscript)
    • < sub > : 아래첨자(subscript)
  • < mark >~< /mark > : 둘러싼 텍스트에 하이라이팅 효과를 줌.
  • < ins >~< /ins > : 텍스트 밑에 가로줄을 만들어 빈칸에 텍스트를 삽입한 것 같은 효과를 줌. (insert)

VS code 단축키

  • Ctrl + / : 주석 달기, 주석 풀기
  • Shift + Alt + ↑ or ↓ : 한줄 위 or 아래 로 복사
  • Ctrl + Shift + k : 한줄 삭제
  • Ctrl + D : 같은 단어, 같은 코드, 반복 코드 선택
  • Alt + ↑ or ↓ : 코드 한 줄 위 or 아래로 이동
  • Shift + Alt + F : 코드 자동 정렬

실습_로그인 페이지 마들기

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

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

<body>
    <h1>로그인 페이지</h1>
    <p>ID : <input type="text"></p>
    <p>PW : <input type="password"></p>
    <button>로그인하기</button>
</body>

</html>

결과물

CSS 기초

HTML에 CSS를 적용하는 방법

  1. 내부 스타일 시트 (Internal Style Sheet): HTML 문서 내에서 <style> 태그를 사용하여 스타일을 지정.
    • 스타일 정보는 HTML 문서 내에 포함되어 있습니다.
  2. 외부 스타일 시트 (External Style Sheet): 스타일을 별도의 CSS 파일에 작성하고 HTML 문서에서 링크를 통해 연결.
    • 외부 CSS 파일은 .css 확장자를 가집니다.
    • 스타일 정보는 HTML과 분리되어 유지보수에 용이.
  3. 인라인 스타일 (Inline Styles): 각 HTML 요소에 직접 스타일을 적용.
    • style 속성을 사용하여 스타일을 정의합니다.
    • 스타일 정보가 HTML 태그 내에 직접 포함.
    • 잘 사용하지 않는다(유지보수에 어려움).

예제

<!--내부 스타일 시트 : HTML 문서 내 <style>~</style> 내부에 스타일 정의-->
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Internal Style Sheet Example</title>
   <style>
       body {
           background-color: #f0f0f0;
           font-family: Arial, sans-serif;
       }
       h1 {
           color: #333;
       }
   </style>
</head>
<body>
   <h1>Hello, World!</h1>
</body>
</html>
<!--외부스타일 시트 예제-->
<!--style.css-->
body {
    background-color: #f0f0f0;
    font-family: Arial, sans-serif;
}
h1 {
    color: #333;
}
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>External Style Sheet Example</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
 <!--인라인 스타일 예제 : HTML의 태그에 스타일 정보가 들어있다.-->
<body style="background-color: #f0f0f0; font-family: Arial, sans-serif;">
    <h1 style="color: #333;">Hello, World!</h1>
</body>

CSS 선택자

선택자 유형예시설명
전체 선택자 (*)* { property: value; }모든 HTML 요소에 스타일을 적용
요소 선택자p { property: value; }모든 <p> 태그에 스타일을 적용
클래스 선택자 (.).highlight { property: value; }특정 클래스를 가진 요소에 스타일을 적용
아이디 선택자 (#)#header { property: value; }특정 아이디를 가진 요소에 스타일을 적용
자식 선택자 (parent > child)ul > li { property: value; }특정 부모의 직계 자식에 스타일을 적용
하위(자손) 선택자 (ancestor descendant)div p { property: value; }특정 조상의 모든 자손에 스타일을 적용
인접 형제 선택자 (prev + next)h2 + p { property: value; }특정 요소의 바로 인접한 형제에 스타일을 적용
일반 형제 선택자 (prev ~ siblings)h2 ~ p { property: value; }특정 요소의 모든 형제에 스타일을 적용

HTML로 레이아웃 만들기

flex로 정렬하기

예제

<!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>
  .container {
    background-color: rgb(216, 216, 219);
    margin: 10px;
    padding: 7px;
    height: 50vh;
    display: flex; /* 부모요소에 속성 적용해 줘야 한다. */
    justify-content: center; /*flex(부모요소 기준)기준 가로 중앙*/
    align-items: center; /*flex(부모요소 기준)기준 세로 중앙*/
  }
  .box {
    background-color: purple;
    color: white;
    margin: 5px;
    padding: 10px;
    border-radius: 5px;
    text-align: center;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
    <span>text</span>
    <span>text</span>
    <span>text</span>
  </div>
</body>
</html>

결과물

정리사항
display: flex; 적용전display: flex; 적용 후display: flex; 속성은 부모 요소에 적용한다.

Flexbox 기본 속성

속성기본값설명
displayflexFlex 컨테이너를 생성함.
flex-directionrow주 축의 방향을 지정.
justify-contentflex-start주 축을 따라 아이템들을 정렬.
align-itemsstretch교차 축을 따라 아이템들을 정렬.
flex0 1 auto아이템의 크기를 지정하는 단축 속성.
align-selfautoalign-items 속성을 무시하고 개별 아이템 정렬.

😊Flex 정리 된 블로그_여기 참고해서 공부하자!

CSS box 모델

  • 모든 HTML 요소는 박스(box) 모양으로 구성되며, 이것을 박스 모델(box model)이라고 부른다.
  • 박스모델은 HTML 요소를 패딩(padding), 테두리(border), 마진(margin), 그리고 내용(content)으로 구분한다.

box model

구성 요소설명
Content요소의 실제 내용이 위치하는 영역.
Padding내용(content)과 테두리(border) 사이의 공간.
Border패딩 주위에 그려지는 테두리.
Margin테두리(border)와 외부 요소 간의 간격.
box-sizing 값기본값설명
content-box기본값요소의 크기는 컨텐츠 영역만을 기준으로 함.
border-box요소의 크기는 컨텐츠 영역에 테두리와 패딩을 포함하여 계산.

google font 사용(무료 폰트 사이트)

🦕https://fonts.google.com/_구글 폰트 사이트

 /* 구글폰트 사용하기위해 import (<style></style>내부 or .css 파일) */
        @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@500&display=swap');
        /* *{} -> 모든 요소에 아래 폰트 적용한다 */
        *{
            font-family: 'Roboto Mono', monospace;
        }

결과물

적용전적용후

숙제

그림1에서 그림2로 만들기

그림1그림2

❤️Day1 숙제

1일차를 마무리 하며 느낀점, BootStrap 클래스에 대하여 공부하자. gpt 당신이 나의 선생님.
profile
라미
다음 포스트

TIL_240126

0개의 댓글