Notice
Recent Posts
Link
«   2024/06   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30
Tags more
Archives
관리 메뉴

공부기록용

230904_TIL 본문

📝TIL📝

230904_TIL

과부하가즈아 2023. 9. 4. 22:07

📌오늘 한 일 

 

총 11:50 중 9시간 정도 몰두 한 것 같다. 다시 마음 다잡고 처음부터 차근차근 한다. 일주일 정도 쉬었더니 속도가 느려진것 같다. 빨리 속도를 좀 내서 할당량 끝내고 추가적으로 공부해야하는뎅,,, 이 웹 기초 하는 동안 우선 빨리 속도를 올리고 추가 공부를 빨리 하는걸 목표로 하자 점점 더 어려워져서 시간이 더 더뎌질 건데 빨리 극뽁하자!

 

정말 기초적인 html이랑 css에 관해서 다시 짚어보는 시간이었다. 조금 아쉬운 부분은 실습 부분들에서 만들어 보는 그 답들이 조건을 알려주기보다는 모두 나와있어서 스스로 하는게 조금 부족해서 그 부분을 다시 스스로 해보도록 하거나 정말 모르는 것 없이 넘어갈 수 있도록 꼼꼼하게 점검하기로! 생각한다.

 

오늘도 역시 기초였지만 새롭게 얻어가는게 있었다. header, main, footer! 이게 맨날 프로젝트나 과제할 때 다들 언급해서 대충은 알고 있었지만 배우는 것은 이번이 처음이었다. 그래서 너무 반가웠고 드디어 제대로 알게 되는구나 싶어서 기뻤다!! html에 구조에 대해 모르는게 많지는 않았지만 header, main, footer, navigator 개념에 대해서는 그저 그런 정도로만 인지하고 있었는데 오늘 제대로 알게 되었다. 

<!DOCTYPE html>
<html>
  <header>    <!--상단영역-->
    <nav>    <!--메뉴버튼영역-->
      <ul>
        <li>
          <a>홈</a>
        </li>
        <li>
          <a>전체목록</a>
        </li>
      </ul>
    </nav>
  </header>

  <body>

    <header>
      <nav>
      </nav>
    </header>

    <main>
      <article>
      </article>
    </main>

    <footer>
      <div>
        <p></p>
      </div>
    </footer>

  </body>
</html>​

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>엘리스 :: elice</title>
</head>

<body>
    <header>
        <h1>
            <img src="elice_logo.png" alt="엘리스 로고">
        </h1>

        <nav>
            <li><a href=#>홈</a></li>
            <li><a href=#>회사 소개</a></li>
            <li><a href=#>연락처</a></li>
        </nav>

    </header>

    <main role="main">
        <article>
            <h2>회사 소개</h2>
            <p>회사 소개와 관련된 본문 내용</p>
        </article>
    </main>
    
    <footer>
        <div>
            <p>서울시 서초구</p>
        </div>
        <div>
            <p>123-456-7890</p>
        </div>
    </footer>
</body>

</html>​

 

또 a태그에 대해 좀 더 알 수 있었다. 

글자나 이미지 클릭시 다른 사이트로 이동시키는 태그
<a href="https://www.naver.com" target="_blank">네이버</a>​
href속성: HTML 연결할 페이지의 주소 지정
target속성: 어떤 방식으로 페이지로 이동할지 결정
>> “_blank”: 새 탭을 띄워서 웹사이트를 전환
>> “_self”: 현재 탭에서 웹사이트를 전환(디폴트값)

a태그를 <img>태그와 엮어서 사용하고, <h1>태그 내부에 작성해서 제목 자체로 a를 사용해 이동하는 방법도 알게되었다!

https://miimee.tistory.com/225

 

간단한 html과 css를 하는데도 오늘 또 새롭게 배운게 있어서 좋기도 하지만 내가 왜 놓쳤을까, 왜 찾지 않았나 생각이 들기도 했다. 그래도 평소 찝찝하게 알던걸 오늘 온전하게 습득한 것 같아서 기초부분이었지만 알찼다😀😀

 

 

 

p.s 플랫폼이 너무 귀여워서 좋다🐰🐰

'📝TIL📝' 카테고리의 다른 글

230913_TIL  (0) 2023.09.15
230911_TIL  (0) 2023.09.11
230906_TIL  (3) 2023.09.06
230811_TIL  (0) 2023.08.11
230810_TIL  (0) 2023.08.11
'📝TIL📝' Related Articles more
Comments