본문 바로가기
카테고리 없음

오즈코딩 스쿨 사업개발 캠프 26일차

하주형 사업구상 및 해외취업 2024. 6. 18. 19:34

Chapter 3-15. HTML기초 1

  • HTML은 웹사이트의 화면을 그리기 위해서 사용되는 언어.
  • <!DOCTYPE html>
    • HTML의 최신버전을 사용해서 웹사이트를 만들겠다는 걸 선언해주는 문구
    • HTML의 최신버전임.
  • HTML은 body와 head로 나뉘어져 있다.
  • body는 실제 화면에 그려질 내용들.
    • body안에 내용을 쓰면 그것이 html 파일에 보이게 된다. 
    •     <meta charset="utf-8"/>
          <meta name="keywords contents= HTML, CSS, CEO개발부트캠프"
      • keywords의 meta 정보는 무엇을 의미하는가?
        • 어떤 웹사이트를 찾을 때 키워드를 이용해서 찾는다.
          • 예를들어 '개발강의'라고 썼을 때, 이 사이트를 노출시키겠다는 의미.
          • '라이프해킹스쿨' 소스코드 보기
              • 라이프해킹스쿨, 자청, 자청 강의, 김성공, 성공, 무자본창업
              • 단어를 노출 시키고 싶다는 것을 사파리, 익스플로러, 크롬을 통해 알리고 싶은 것.
              • 검색어에 노출 시키는 것.
              • 엄청나게 많은 데이터를 이용해서 meta 태그를 이용해서 작성을 한다. keyword에 무엇이 들어가 있을까요?
              • meta는 웹사이트의 정보를 표기하는 것.

Chapter 3-16. HTML기초 2

  • body
    • 웹사이트 화면에 그려주기 위한 태그
    • <h1></h1> | <h2></h2>
      • 숫자가 커질 수록 글자가 더 작아짐.
      • but <h7></h7>이란 태그는 없음.
    • <pre></pre>
      • 내가 쓴 글자의 위치나 띄어쓰기를 그대로 유지시켜주는 태그.(↔<h6></h6>)
    • <br/>
      • 하나로만 쓰는 태그
      • 줄바꿈 하는 태그
    • <strong></strong>
      • 텍스트를 두껍게 만들어주는 태그.
      • 다른 텍스트 보다 상대적으로 두꺼움.
    • <li></li>
      • 글자 앞에 '점'을 붙여줌.
    • <ol></ol>
      • 글자 앞에 '번호'가 붙음.

Chapter 3-17. HTML기초 3

  • '<input></input>'
    • 입력 받을 때 쓰는 태그
      •     <input type="text" />
            <input type="password" />
            <input type="color" />
            <input type="file" />
            <input type="radio" />
            <input type="checkbox" />
  • a 태그 : 링크 이동
  • <div></div>
    • 영역을 구분 해 주는 역할.
  • img 태그
    • 마우스 우클릭 한 다음, src쪽 에다가 주소 넣어주시면 됩다.
    •  img 태그는 src 쪽에 이미지 주소만 적어주면 내 사이트에 이미지를 띄울 수 있다. 

Chapter 3-18. HTML기초 4

  • table 태그
    • 테이블을 만들 수 있는 코딩
  • <th></th>
    • 테이블 헤드(table head) 약자.
    • 테이블 헤드에 들어가는 내용을 작성할 때 <th></th> 쓴다.
    •       <th>제목</th>
            <th>내용</th>
            <th>주소</th>
  • <tr></tr>
    • 테이블 로우(table row)의 약자.
    •       <tr>
              <td>주형</td>
              <td>코딩</td>
              <td>.com</td>
            </tr>
  • <td></td>
    • 테이블 데이터(table data)의 약자
    •         <td>주형</td>
              <td>코딩</td>
              <td>.com</td>
  • <iframe src></iframe>
    • 사이트안에 들어가는 인터넷 사이트 크기 조정
    • ex) <iframe src="https://lifehacking.co.kr" style="width:1000px; height:700px"></iframe>
  • 주석처리
    • <!--  -->
    • 이 안에는 어떤 내용을 써도 컴퓨터가 읽지 못하는 부분이 됨.(컴퓨터가 읽을 수 없는 언어다)
    • Ctrl + /

Chapter 3-19. CSS 기초 1

  • CSS란
    • 웹사이트의 요소들을 꾸며줄 수 있는 (색상입히기, 위치이동)역할을 하는 언어
    • CSS를 적용할 수 있는 3가지 방법
      • 태그 바로 옆에다가 style이란 속성값을 푸는 것.
      • head안에다가 style 태그를 열고 닫고 한 다음에 style을 하는 방법
      • CSS 파일에다가 선택자, 속성명, 속성값을 정해준 다음, 위에서 link라는 태그로 CSS파일을 불러오는 방법.
      • <div style="color:red"> 안녕하세요?  </div> 
        • '안녕하세요'가 빨간색으로 나옴.
        • div안에 텍스트로 들어가 있음.
        • div태그 안에 있기 때문에 div의 컬러를 레드로 해줄 거야.
        •         div{
                    color(속성명):red(속성값);
                  }
        • div가 선택자(어떤 걸 선택해서, style을 입혀줄 건지를 쓰는 것)  
        • 다른 파일을 가지고 와서 CSS를 적용할 수 있음.

Chapter 3-20. CSS 기초 2

  • font weight :  글자의 두께를 결정하는 속성
    • font weight : 500;
  • font size : 글자의 크기를 결정하는 속성
    • font-size :20px;
  • text-decoration : 글자를 꾸며주는 속  
    • text-decoration : line-through;
  • text-shadow :
    • 1번째 픽셀은 오른쪽으로 얼마 이동했는가?,
    • 2번째 픽셀은 아래쪽으로 얼마 이동할 값인가?,
    • 3번째 픽셀은 그림자 색깔이 무엇인지를 알려주는 값.
      • text-shadow : 2px 1px red;

Chapter 3-21. CSS 기초 3

  • 어떤 사건이 발생했을 때 CSS가 적용 되도록 할 것.
  • div에 마우스를 올렸을 때 컬러를 레드로 주세요
    •         div:hover {
                color:red;
              }
  • 넓이 지정
    • width : 200px;
  • div 값을 분리해서 주는 방법
    • id값을 넣을 수 있습니다.
      • ex)  #ca {
                  color : blue;
                  font-weight : 500;
                  font-size :20px;
                  text-align : center;
                  text-decoration : line-through;

                  letter-spacing : 10px;
                  text-shadow : 2px 1px red;
                  background-color:blue;

                  width:400px;
                  height:400px;
                }

        <div id="ca"> 안녕하세요!!</div>
        <div id="cb"> 반갑습니다!!</div>
      • "ca"는 적용이 잘 되었지만, "cb"는 적용이 되지 못했다.
    • id값과 클래스(class) 값을 쓸 수가 있다. 
      • 클래스도 id와 비슷하다.
      • 동일하게 각각 스타일을 부여할 때 점을 붙여줌
        • ex).cb, .ca
    • 클래스(class)와 id의 차이
      • id의 경우: 만약에 id를 지목했다고 하면, 절대로 똑같은 id를 가진 div나 다른 태그가 있어서는 안된다. 
      • id는 말 그대로 고유값임.
      • 클래스(class)는 여러 class에 동일한 class명을 이렇게 적용을 해줄 수 있음.
      • 클래스(class)는 말 그대로 '반'을 생각하면 됨.
    •  
    • div {
                color:red;
              }

              #test {
                color:blue;
              } 
      • 블루로 바로 바뀌는 것이 아니라 레드로 바뀌었다가 블루로 바뀌었음.
    •         #test {
                color:blue;
                border:2px solid(dotted,dashed);
              }
      • 다양한 선으로 변경가능.
      • border-radius
        • 선의 모양이 볼록해짐.(경계선이 각지지 않게 하는 것)
      • margin-top
        • 바깥에 여백을 주는 건데, 위에 바깥에 40px의 여백을 줄 것.
      • margin-bottom
        • margin-top의 반대
        • margin-left면 왼쪽에 공백이 생기게 된다. 
      • padding-top. bottom, left, right.
        • 안쪽에 여백을 주는 것.
      • margin 4개를(top, bottom, left, right)한 번에 주는 방법
        • margin: 20px 50px 30px 40px;
          • 20px : 위쪽(top)
          • 50px : 오른쪽(right)
          • 30px : 아래(bottom)
          • 40px : 왼쪽(left)
        • padding도 같은 패턴임.

티스토리툴바