'html' 태그의 글 목록 (2 Page)

Q1

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz-1</title>
    <link rel="stylesheet" href="./css/quiz-4.css" />
  </head>
  <h1>이미지 삽입하기</h1>
  <img src="./imgs/umbrella.jpg"   alt="img fail">
  </h1>
  <body></body>
</html>

Q2

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz-2</title>
  </head>
  <body>
    <h1>포털 사이트로 이동하기</h1>
    <img src="./imgs/img.png" alt="네이버" />
  </body>
</html>

Q3

NAVER 버튼 클릭시 네이버로 이동

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz-2</title>
  </head>
  <body>
    <h1>포털 사이트로 이동하기</h1>
    <a href="https://www.naver.com/">
      <img src="./imgs/img.png" alt="네이버" />
    </a>
  </body>
</html>

'프로그래밍 공부 > HTML + CSS' 카테고리의 다른 글

HTML5 + CCS3 연습문제 2강 (0)	2023.06.12

1. 웹 브라우저란?

2. 웹 브라우저의 종류

1. 웹 브라우저란?

1-1. 브라우저는 html이란 문서를 읽어서 화면에 출력해주는 역할을 한다. 뷰어라고 생각하면 쉽다.
1-2. 왜 브라우저가 많을까? >> 자기 서비스를 많이 이용하게 하려고..
1-3. chrome이 가장 빠르기 때문에 인기가 많다.
1-4. node.js에서도 chrome에서 사용하는 js 환경과 같은 것을 사용하고 있다.
1-5. 간단한 용어 정리
local : 자기 컴퓨터 안에 있는 것을 의미한다.
server : 인터넷 환경이 잘 셋팅 되어 있는지, cost를 최소화 하는 것이 중요하다. cpu의 연산량 문제

>>> cpu, 하드디스크 최소한의 컴퓨터 사양을 셋팅한다. 모니터같은 것들이 필요없음. 자기자신의 컴퓨터 로컬과 서 버 컴퓨터를 분리하여 코스트비용과 속도 및 컴퓨터 사양을 셋팅해야한다.
gpu : 단순 계산에 있어서 빠름. 채굴할 때 사용하는 이유 >> 머클트리 증명에서 데이터를 암 호환하고 빠르게 찾 는 데 최적화 되어있기 때문에 사용한다.

2. 웹 브라우저의 종류

chrome, safari, edge, firefox, samsung, google,brave 브라우저 등이 있다.

>> 유투브 프리미엄 비구독자라면 브레이브 브라우저로 유투브 보는 것을 강력히 추천한다. 브레이브의 경우 모든 광 고 를 막아주고 브레이브 내에 자체 광고를 보게 되면 bat (베이직 어텐션 토큰) 을 인센티브로 주고 있다. -> 토 큰 은 별로 안주니까 유투브만 보는 것을 추천

1.HTML

2. Element

3. Element의 속성

4. 기타 vscode 설정

1. HTML

1-1. HyperText MarkUp Language : 구조를 나타내기 위한 단순한 언어
1-2. HyperText : 문서끼리의 연결을 의미, 다른 문서로의 이동과 다른 문서를 가져오는 것

2. Element

: <>를 사용하여 시작하고 </>를 사용하여 끝나는 전체를 뜻한다. 엘리먼트 항상 열고 닫는 것이 있어야 한다.
2-1. head 엘리먼트 : 브라우저에게 넘겨 줘야할 파일을 head 엘리먼트에 작성
헤더엘리먼트에 들어가는 제목 : <title></title>
2-2. body 엘리먼트 : 실제로 html 파일에 출력될 부
<div></div> : 영역을 나누는 엘리먼트, 가장 많이 사용하는 엘리먼트

3. Element의 속성

3-1. <p></p> : 의 경우 좌우를 모두 차지하는 것을 블록 속성이라고 한다.

3-2.<span></span> : 의 경우 자신의 것만 차지하는 것이라 인라인 속성이라고 한다.

3-3. 인라인 : 한줄안에서 사용한다

3-4. 블록 : 욕심이 가득해서 전부 차지하고 싶어하는 속성이 있다.

4. 기타 vscode 설정

- vscode extension :
- Liver Server
- prettier - Code formatter  :  extension settings 에서 자세한 프리티어에 관한 설정을 할 수 있다.
- Print Width : 한 줄에 몇 글자까지 입력할 것 인가
- Tab Width : 몇 칸을 띄어 쓸 것인지
- Default Formatter : Prettier - Code formatter 설정 하면 형식에 맞게 저장된다.

    - vscode 설치 방법 :
        - vscode 란 : 텍스트 편집기 , 어떤 언어를 사용함에 따라서 사용할 수 있는 편집
        - vscode 특징 :  폴더기준으로 많이 사용한다.
        - vscode 구글 검색
        - window 버젼이나 ios 버젼에 맞는 installer 설치

'블록체인 개발' 카테고리의 다른 글

선택자 및 속성 (0)	2023.06.15
이미지 관련 태그 & form 형식 (0)	2023.06.14
개발이란 ? (0)	2023.06.12
블록체인 개발 기초 - CSS(선택자) (0)	2023.06.08
블록체인 개발기초 - html 기초 (1)	2023.06.07

Q1.

QUIZ-1.HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz2-1</title>
    <link rel="stylesheet" href="./css/quiz-1.css" />
  </head>
  <body>
    <img class="seoul_logo" src="./img/seoul_logo.jpg" alt="서울로고" />
    <div class="inline-content">
      <h1>서울특별시</h1>
      <p><b>서울의특별시 서울의 지향 이미지 : 역사와 활력의 인간도시</b></p>
      <div>
        <i>
          휘장은 한글 '서울'을 서울의 산, 해, 한강으로 나타내면서 전체적으로는
          신명나는 사람의 모습을 형상화한 것으로 인간 중심도시를 지향하는 서울을
          상징합니다.
        </i>
      </div>
    </div>

    <p>
      자연 - 인간 - 도시의 맥락 속에서<br />녹색 산은 환경사랑,청색 한강은
      역사와 활력,<br />
      가운데 해는 미래의 비전과 희망을 함축하고 <br />
      이 세가지 요소를 붓터치를 자연스럽게 연결하여 <br />
      서울의 이미지와 사람의 활력을 친근하게 느낄 수 있도록 하였습니다.
    </p>
  </body>
</html>

QUIZ-1.CSS

html,
body {
  margin: 0;
  padding: 0;
}

.seoul_logo {
  display: inline-block;
  width: 300px;
  height: 300px;
}

.inline-content {
  display: inline-block;
  vertical-align: top;
}

.inline-content h1 {
  /* margin-top: 50%; */
}

Q2.

QUIZ-2.HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz2-2</title>
  </head>
  <body>
    <h1>이지스퍼블리싱 신입 사원 모집 공고</h1>
    <p>IT 기획, 편집 부서에서 함께 할 신입 사원을 모집합니다.</p>
    <ul>
      <li>모집 직군 : 편집 기획부서</li>
      <li>
        직무 내용 : 도서 프로듀싱 업무 (신입 지원 가능)
        <ul>
          <li>도서 기획, 편집</li>
          <li>도서 홍보, 독자 소통</li>
        </ul>
      </li>
      <li>접수 마감일 : 2016.3.6</li>
    </ul>
    <p>자세한 내용은 공지 게시판을 참고하세요.</p>
  </body>
</html>

Q3.

QUIZ-3.HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz-3</title>
  </head>
  <body>
    <div>커피 드립 순서 - 아라비아 숫자</div>
    <ol>
      <li>필터 접기</li>
      <li>분쇄</li>
      <li>불림</li>
      <li>추출</li>
    </ol>

    <div>커피 드립 순서 - 알파벳 소문자</div>
    <ol type="a">
      <li>필터 접기</li>
      <li>분쇄</li>
      <li>불림</li>
      <li>추출</li>
    </ol>
  </body>
</html>

Q4.

QUIZ-4.HTML

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>quiz-4</title>
    <link rel="stylesheet" href="./css/quiz-4.css" />
  </head>
  <body>
    <table>
      <caption>
        <b>주요 SNS 서비스별 이용률(%)</b>
      </caption>
      <tr>
        <th></th>
        <th>페이스북</th>
        <th>카카오스토리</th>
        <th>밴드</th>
        <th>인스타그램</th>
        <th>트위터</th>
      </tr>
      <tr>
        <th>2015년</th>
        <td>77.1</td>
        <td>58.3</td>
        <td>32.4</td>
        <td>16.7</td>
        <td>22.1</td>
      </tr>
      <tr>
        <th>2016년</th>
        <td>73.8</td>
        <td>51.0</td>
        <td>40.1</td>
        <td>28.1</td>
        <td>14.7</td>
      </tr>
    </table>
  </body>
</html>

QUIZ-4.CSS

html,
body {
  margin: 0;
  padding: 0;
}

table,
caption {
  width: 100%;
  border: 1px solid #444444;
}

th,
td {
  border: 1px solid #444444;
}

'프로그래밍 공부 > HTML + CSS' 카테고리의 다른 글

HTML5 + CSS3 연습문제 3강 (0)	2023.06.13

선택자

1. 클래스 선택자

2. id 선택자

선택자

: 선택을 해주는 요소 , 이를 특정요소들을 선택하여 스타일을 적용할 수 있게 한다.

클래스 선택자

: 클래스에 속성 값을 가진 html 요소를 찾아 선택한다. 클래스 선택자는 클래스에 해당하는 요소앞에 .을 붙여준다.

.items {
  color: blueviolet;
}

id 선택자

: id에 속성 값을 가진 html 요소를 찾아 선택한다. id 선택자는 id에 해당하는 요소앞에 #을 붙여준다.

#root {
  background-color: aqua;
  color: #666;
}

'블록체인 개발' 카테고리의 다른 글

이미지 관련 태그 & form 형식 (0)	2023.06.14
웹 브라우저란 (2)	2023.06.13
개발이란 ? (0)	2023.06.12
블록체인 개발기초 - html 기초 (1)	2023.06.07
WEB 개발 입문 (0)	2023.06.02

1. 블록

2. 인라인

3. 속성에서 많이 사용하는 것들

1. 블록

display 속성값이 블록(block)인 요소는 언제나 새로운 라인(line)에서 시작하며, 해당 라인의 모든 너비를 차지한다.

<p>, <div>, <h>, <ul>, <ol>요소는 display 속성값이 블록(block)인 대표적인 요소

1-1) <p>

 <p>문단을 출력하는 엘리먼트</p>

1-2. <div>

<div>블록 요소, 가장 많이 사용하는 엘리먼트</div>

1-3. <h>

<h1>제목을 출력하는 엘리먼트(위아래로 공백,블럭요소)</h1>

1-4. <ul>

: unordered list 로 순서가 숫자로 정해진 것이아니라 검은점 형태로 출력이 된다.

<ul>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
    <li>차
        <ul>
            <li>녹차</li>
            <li>홍차</li>
            <li>자스민차</li>
        </ul>
    </li>
</ul>

1-5. <ol>

: ordered list로 순서가 있는 리스트로 출력시 앞에 숫자형 리스트로 출력된다.

<ol>
    <li>아메리카노</li>
    <li>카페라떼</li>
    <li>핫초코</li>
</ol>

<ol type="A" start="10">
    <li>녹차</li>
    <li>홍차</li>
    <li>자스민차</li>
</ol>

2. 인라인

요소의 너비도 해당 라인 전체가 아닌 해당 HTML 요소의 내용(content)만큼만 차지한다.

<span>, <a>, <img>요소는 display 속성값이 인라인(inline)인 대표적인 요소이다.

2-1. <span>

 <span>한칸 띄어서 출력이 된다.</span>

2-2. <a>

<a href="http://www.r-blockchain.tistory.com">r-blockchain 블로그로 이동</a>

2-3. <img>

<img src="/html에그림이 링크 된다.png" alt="연결">

3. 속성에서 많이 사용하는 것들

id, class, alt 등이 있다.

3-1. id

: 특정한 엘리먼트를 나타내는 이름, 하나의 엘리먼트에 하나의 ID를 설정할 수 있다. 중복될 수 없음.

3-2. class

: 엘리먼트의 클래스 이름을 정하여 묶음으로 설정 가능

3-3. alt

: 파일을 가져오지 못했을 시 출력하는 텍스트

'블록체인 개발' 카테고리의 다른 글

이미지 관련 태그 & form 형식 (0)	2023.06.14
웹 브라우저란 (2)	2023.06.13
개발이란 ? (0)	2023.06.12
블록체인 개발 기초 - CSS(선택자) (0)	2023.06.08
WEB 개발 입문 (0)	2023.06.02

1. 웹 브라우저란 ?

2. 웹 브라우저의 종류

3. HTML

4. Element

1. 웹브라우저란 ?

브라우저는 사용자와 서버를 연결시켜 데이터를 주고받는 것이다.

브라우저는 파일을 읽어 파일 입출력을 해줄 수 있다.

2. 웹 브라우저의 종류

chrome, edge, safari, firefox 등이 있다.

왜 chrome 일까? >> 가장 빨라서 많이 사용한다.

3. HTML (Hypertext Markup Language)

HTML 웹브라우저에서 가장많이 사용하는 문서이다.

하이퍼링크를 통해서 다른 문서로 이동할 수 있다.

메모장에 hello를 입력하고 html 확장자로 변경해주면 자신의 브라우저에 맞는 브라우저로 읽어준다.

F12 를 통핵 개발자 도구를 열 수 있다.

메모장 형식의 텍스트 편집기를 사용하면 MACOS에서 사용되지 않기 때문에 VSCODE 텍스트 편집기를 통해 개발한다.

VSCODE를 통해 자동완성과 확장프로그램들을 통해 여러언어와 편리성을 추구할 수 있다.

4. Element

<> 를 사용하여 </> 요소를 나타낸다.

4-1. div

<div>
            앞으로 가장 많이 사용하는 엘리먼트 입니다. 
            이렇게 입력하면 어떻게 뜰까요?
</div>

위와 같은 형식으로 띄어 써도 실제로는 줄바꿈 되지 않고 연결되어 나온다.

<div></div> 는 줄바꿈 형식으로 사용된다.

<div>
            부모 엘리먼트입니다.
            <div>자식 엘리먼트입니다.</div>
            <div>자식 엘리먼트입니다.</div>
</div>

위와 같은 형태로 부모와 자식 관계로 감싸고 있는 형태로 구현할 수 있다.

4-2. p

<p>
            문단을 작성하는 엘리먼트입니다. 
            줄바꿈이 될까요? 
</p>

<p></p> 엘리먼트의 경우 문단이 한칸 띄어져서 나온다.

<p></p> 의경우 문단안에 p나 div는 들어갈 수 없다.

4-3. span

<span>가</span>
<span>나</span>
<span>다</span>

<span></span> 의 경우 한칸 띄어쓰기 형태로 출력이 된다.

4-4. 주석

<!-- ctrl 슬래시를 하면 주석이 된다. 출력이 되지 않는다. 단 개발자 도구에선 보인다. 배포전엔 주석 제거 필수-->

4-5 기본적인 vscode 프리티어 설정

default formatter : Prettier - Code formatter

format on save : 켜기

'블록체인 개발' 카테고리의 다른 글

이미지 관련 태그 & form 형식 (0)	2023.06.14
웹 브라우저란 (2)	2023.06.13
개발이란 ? (0)	2023.06.12
블록체인 개발 기초 - CSS(선택자) (0)	2023.06.08
블록체인 개발기초 - html 기초 (1)	2023.06.07

html

Q1

Q2

Q3

'프로그래밍 공부 > HTML + CSS' 카테고리의 다른 글

1. 웹 브라우저란?

2. 웹 브라우저의 종류

1. 웹 브라우저란?

2. 웹 브라우저의 종류

1.HTML

2. Element

3. Element의 속성

4. 기타 vscode 설정

1. HTML

2. Element

3. Element의 속성

4. 기타 vscode 설정

'블록체인 개발' 카테고리의 다른 글

Q1.

Q2.

Q3.

Q4.

'프로그래밍 공부 > HTML + CSS' 카테고리의 다른 글

선택자

1. 클래스 선택자

2. id 선택자

선택자

클래스 선택자

id 선택자

'블록체인 개발' 카테고리의 다른 글

1. 블록

2. 인라인

3. 속성에서 많이 사용하는 것들

1. 블록

1-1) <p>

1-2. <div>

1-3. <h>

1-4. <ul>

1-5. <ol>

2. 인라인

2-1. <span>

2-2. <a>

2-3. <img>

3. 속성에서 많이 사용하는 것들

3-1. id

3-2. class

3-3. alt

'블록체인 개발' 카테고리의 다른 글

1. 웹 브라우저란 ?

2. 웹 브라우저의 종류

3. HTML

4. Element

1. 웹브라우저란 ?

2. 웹 브라우저의 종류

3. HTML (Hypertext Markup Language)

4. Element

4-1. div

4-2. p

4-3. span

4-4. 주석

4-5 기본적인 vscode 프리티어 설정

'블록체인 개발' 카테고리의 다른 글

티스토리툴바