'분류 전체보기' 카테고리의 글 목록 (8 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. 개발에 대한 직군

3. 프로그래밍

1. 개발업무의 이해

1-1. 개발사의 업무

1-2. 개발사에서 하는 일

서버 (상대방 컴퓨터: 온라인 상에서 접속할 수 있는 컴퓨터)- 데스크탑 - 모바일

개발사에서는 웹페이지, 게임, 프로그램 등 제공

개발사에서는 유지보수와 서버를 제공해야한다.

1-3.개발 과정

기획 - 개발 - 배포 및 유지보수

기획 : 수익성 모델 (buisness model), 어떤 역할을 하는지, 디자인 등..

개발 : 기획된 내용을 바탕으로 프로그래밍, 구현

배포 및 유지보수 : 프로그램을 배포하고 오류에 대한 유지보수

개발자의 입장 :

요구사항 분석 - 설계(플로우차트, 어떤데이터를 주고 받을지 설계, 개발지의 시선으로 기능을 설계) - 구현(코딩) - 테스 트(개발자, 랜덤사용자)

2. 개발에 대한 직군

2-1. 기획자 / 디자이너

서비스 기획, 광고 기획, 게임 기획, 웹 기획, 디자인

웹 기획 : UI /UX

UI : User Interface 사용자에게 어떻게 보여지는가

UX : User eXperince 사용자의 경험 , 사용자가 웹페이지를 사용함에 있어 불편함이 없는가

2-2. 개발자

OS 개발(Operating System : 운영체제) 하드웨어 - 프로그램 연결 / 게임 개발 / 서버 아키텍쳐 데이터 서버 관련 저장하 고 서비스를 진행할 것 인가/ 웹 개발 / 프론트엔드 개발 : 보여지는 것들을 개발 / 백엔드 개발 서버와 보여지는 부분을 서 로 연결해주는 것 , 프론트엔드에서 온 데이터를 저장하거나 주고 받는 것 , 데이터를 저장할 서버 구현, 배포 및 서버 관리, 요청된 데이터를 주고 받는 것 , 죄적화 / QA : 게임테스트 , 테스팅, PM : 기획자 ,Project Manager /블록체인 개발자 : 네트워크에 트랜잭션 요청, 토큰 생성, 토큰에 대한 거래 구현, 토큰정보 제어, DEX, 디파이

3. 프로그래밍

3-1. 프로그래밍이란?

코딩 : 구현단계에서 하는 코드 짜거나 언어를 짜는 행위

프로그래밍 : 프로그래밍은 프로그램을 만들기 위한 전체적인 과정

플로우 차트 : 어떤 데이터가 들어왔을 때 어떻게 처리해서 보낼 것인가에 흐름을 도식화한 차트

3-2. 컴퓨터

ex) 데스크탑 노트북 스마트폰 스마트워치 등..

컴퓨터는 0 과 1로만 모든것을 저장하고 출력한다.

cpu : 복잡한 계산을 한다.

gpu : 그래픽을 출력하기 위해 만들어졌기 때문에 계산을 빨리하기 위해 만들어짐. 어렵지 않은 계산을 빠르게 함.

3-3. 프로그래밍언어

언어종류 : 인터프리터, 컴파일러, 어셈블러, 기계어(컴퓨터가 실행하는 언어)

인터프리터 언어와 컴파일 언어

인터프리터 언어 : 한줄한줄읽으면서 기계어로 바꿈

ex) 자바스크립트 , 파이썬

컴파일 언어 : 작성한 언어를 전부 기계어로 바꾸어 실행, 언어를 기계어로 바꾸는 과정을 컴파일이라고 부름

ex) c, c++

1byte 8비트 = 2^8 : 256

내가 목표로하는 개발자는 무엇일까?

: 블록체인 게임엔진과 블록체인 게임에 거래소 개발을 원하고 있는 거 같다. 여러 게임기업이 블록체인 기술을 택하였지만, 아직까지 대중적이고 상용화에 성공한 블록체인 게임 및 블록체인 시스템은 존재하지 않는다. 비단, 블록체인이 코인 시스템에서 사용되고 있긴 하지만, 블록체인 개발자로써 더욱 시스템 안정적이고 사용자들이 편하게 블록체인 기술을 접할 수 있는 개발자가 되어야 겠다. 흔히 UX/UI란 개념이 사용자 인터페이스와 사용자 경험을 바탕으로 한다면, 블록체인 인터페이스와 블록체인 경험이라는 새로운 신조어 생기지 않을까 싶다.

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

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

선택자

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