NIPA-ORACLE #18 - Web

HyunJunSon·2025년 10월 24일

Flask bootstrap

NIPA-ORACLE

목록 보기

22/28

1. git ls-remote origin

원격 저장소(origin)에 어떤 브랜치나 태그가 존재하는지 확인하는 명령어

2. 상태값 리턴 차이

랭그래프 상태값을 state 객체 전체로 리턴할수도 있고, dict 에 변경일부값만 리턴할수도 있음
변경일부값만 리턴하는 걸 추천

3. Emmet 문법

div>ul>li^p+a

<div>
   <ul>
       <li></li>
   </ul>
   <p></p>
   <a href=""></a>
</div>


div>(header>ul>li*2)+footer

<div>
   <header>
       <ul>
           <li></li>
           <li></li>
       </ul>
   </header>
   <footer></footer>
</div>

<!-- 그룹화를 통해 `footer`는 `header`의 형제 요소가 되었다. －－＞

속성설정방법

<td title="bye" colspan="5"></td>

td[title="bye" colspan=5]


<ul>
   <li class="item1"></li>
   <li class="item2"></li>
   <li class="item3"></li>
   <li class="item4"></li>
   <li class="item5"></li>
</ul>

ul>li.item$*5

<ul>
   <li class="item5"></li>
   <li class="item6"></li>
   <li class="item7"></li>
   <li class="item8"></li>
   <li class="item9"></li>
</ul>
ul>li.item$@5*5


<div class="container">
   <ul class="list">
       <li class="list-item"><a href="">list1</a></li>
       <li class="list-item"><a href="">list2</a></li>
       <li class="list-item"><a href="">list3</a></li>
       <li class="list-item"><a href="">list4</a></li>
       <li class="list-item"><a href="">list5</a></li>
   </ul>
</div>

.container>ul.list>(li.list-item>a{list$})*5

<div class="container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
  <div class="item">8</div>
</div>

.container>.item*8>{$}


bg10p -> background: 10%;
h100p -> height: 100%;
m10p30e5 -> margin: 10% 30em 5px;
div[w100 h100] => div { width: 100px; height: 100px; }

4. div vs span의 차이

과 의 차이는 **블록 레벨 요소(block-level element)**인지, **인라인 요소(inline element)**인지에 있습니다.
div : 스타일링: margin, padding, width, height 적용 가능
span : 한 줄 내에서 이어짐 (줄바꿈 없음) /문장 내 일부 텍스트나 작은 영역 스타일링

5. 빈페이지 이동

      <p><a href="https://www.google.com" target="_blank">구글로 이동</a></p>

6. 의 경로 기준(base path) 은 현재 HTML 파일이 위치한 폴더 기준

7. download 위치 지정은 브라우져에 지정된 위치를 따른다. 이름은 지정 가능

8. 위는 틀리고, 밑은 맞다

9. slelect > option

10. 버튼같은데 input 타입이 submit인 것

for 속성은 id 값과 연결된다.

11. 시맨틱 tag

시맨틱 태그(Semantic Tag)는 HTML5에서 ‘의미(semantic)’를 명확하게 전달하기 위해 도입된 태그입니다.

즉, 단순히 화면에 구조를 만드는

나 과 달리, 콘텐츠의 역할과 의미를 브라우저나 검색엔진, 보조기기(스크린 리더)에게 명확히 알려주는 태그입니다.

12. a 태그 동작 주기

13 .float

떠다님
14. margin vs padding

15. 1rem

1em = 16px

16. jinja 구조

템플릿 상속은 여러 페이지에서 공통되는 부분(헤더, 푸터, 네비게이션 등)을 하나의 ‘기본 템플릿’에 정의하고,
각 페이지에서 다른 부분만 재정의(override) 하도록 하는 구조

  <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <title>{% block title %}기본 제목{% endblock %}</title>
  </head>
  <body>
    <header>
      <h1>공통 헤더</h1>
    </header>

    <main>
      {% block content %}
      <!-- 자식 템플릿에서 여기에 내용이 들어감 -->
      {% endblock %}
    </main>

    <footer>
      <p>공통 푸터</p>
    </footer>
  </body>
</html>

HyunJunSon

즐겁게 공부하고 사람들에게 도움을 주는 개발자가 되고 싶습니다.