웹디자인 및 UI (HTML+CSS)

도백 / do back·2022년 11월 25일

1,2일차

간단한 홈페이지 구성을 만들 때
index.html의 파일과 style.css의 파일을 기본으로 만들고 시작한다.
홈페이지 전체적인 구성은 큰 틀의 전체적인 모양의 wrap
위에서부터 중간틀인 header,slide,contents,footer의 모양으로 구성되어있다.
그러므로 우선 html 파일에
이와 같이 전체적인 틀인 wrap안에 제일 위에서 부터 header를 넣고 header 부분의 다른 구성이자 변수인 logo와 nav를 집어 넣는다
그 다음 부분인 slide 부분을 넣고
그 다음인 contents를 넣으며 contents안에 있는 구성부분들인 C1,C3,C4를 집어 넣는다
마지막 부분인 footer를 넣으며 구성부분인 logo1,copyright,sns를 넣으면 된다.
이후 중간 틀의 구성들은 다른 css파일을 따로 만들어 크기 및 색깔을 지정하고 그 파일들을 이곳과 연결 시켜야 하기 때문에
윗 부분에 <link href="css/style.css" type="text/css" rel=stylesheet"/> 라고 적으며 스타일의 부분엔의 중간 틀 구성들 종류마다 하나씩 여러 줄을 작성해 주면 된다.
그리고 중간틀들의 크기또한 따로 지정해 주어야 하는데
각 부분들 마다 크기를 따로 지정해주면 된다.
그 후
중간 틀격인 이들의 이름과 똑같은 css파일들을 따로 구성하여 만들어 주고

이와 같이 그 중간틀의 안에 있는 다른 구성들을 하나씩 입력하여 크기 및 색깔을 지정해 주면된다.
그러면 이런식으로 완성이 된다.

선생님의 메모장 1일차
-까페주소 : http://cafe.naver.com/phbprogramming
-오리엔테이션
-예상진도
-VSCODE 설치
-VSCODE 확장도구 설치
-기본 태그~ 연습
(h, p, br, ~~~ , a, img, div, span ~)
-웹디자인 기능사 와이어 프레임 제작

-기술영업
-IT기획
-디자이너 - 포토샵,일러스트
-퍼블리셔 - HTML+CSS+JS+JQUERY
-프론트 엔드 개발자 - 화면쪽 API, 데이터처리
-백엔드 엔드 개발자 - DB처리~, 파일처리~
-DBA

-VSCODE - Visual Studio Code
-고급 메모장
-여기선 코드 편집만 하고, 실제 실행 담당은 크롬 브라우저

-eclipse - IDE - Integrated Development Environment
-통합개발환경 : 편집기+컴파일러+디버거~

원래 html파일을 탐색기 가서
더블클릭해서 실행해야 되는데

open in browser 설치하고
VSCODE에서 ALT+B단축키만 누르면
그 작업을 대신해준다.
바로 실행 해주는 기능 (편리함)
(어짜피 핵심적인 실행은 브라우저가 하는거고
VSCODE는 부가적인 기능만 제공할 뿐)

선생님의 메모장 2일차

-저번시간 내용:
-VSCODE설치, 추천 확장도구 설치
-기본태그 (h1, p, br, em, b, i, ...)
-style속성->style태그->css파일
-img태그 사용 (절대경로, 상대경로)
div사용, id부여

-이번시간 내용:
-복습, live server 사용, IT용어로 영어 공부하기
-display속성, float속성
-웹디자인 기능사 와이어 프레임 완성, 와이어 프레임 제작 연습

Visual Studio Code
-편집기 (고급 메모장)

VSCODE 는 코드 편집만 하는거고, 실행은 브라우저

Eclipse
-IDE - Intergrated Development Environment

html태그 열고닫고 안에
head태그 열고 닫고
boddy 태그 열고 닫고
html 태그- head, body
head - meta - charest UTF-8.css파일 연결
link -> css파일 연결
href - hyper reference, type='text/css' ,rel=related ='stylesheet'

style속성-> style태그 -> css파일 분리

h1,p,br,b,em,i

div - division (구역.영역~)
divide -나누다

< div id="my-div1">

아이디가 my-div1인 요소를 ~
#my-div1{

}

공공기관:웹퍼블리셔+스프링개발자

img태그
절대 경로:<img src="C:\Users\YJ\Desktop\HTML+CSS소스\images\dog.jpg"/(오른쪽부호)
상대 경로:<img src="./images/dog.jpg"/(오른쪽부호)

상대경로: .(현재위치~), ..(한칸 상위폴더)

HTML+CSS 프로젝트 폴더
-index.html (메인화면)
-css
-style.css
-images
-dog.jpg
-js
-jquery.min.js
-app.js
-video
-audio
-fonts
(당분간 상대경로 쓸때 거의 .(현재경로))
(근데,style.css파일에서 이미지 폴더에 접근하려하거나~하면..(상위폴더)쓸수있음)

div는block이다.
div의 display속성이 block이다.

display속성 세가지
-inline
->가로배치,크기는 글자 크기만큼 적용
-block
->세로 배치,크기 적용 가능 (가로,세로)
-inline-block
->가로 배치,크기 적용 가능 (가로,세로)

폴더 생성,파일 세팅~하고
div 아이디 wrap 만들어서
가장 바깥 큰 틀 만들고
위,아래 나누고 (그냥 원래 block)
그 다음 헤더 가로 나누고(float:left)
컨텐츠 가로 나누고(float:left)
푸터 가로 나누고(float:left)

설명

< !DOCTYPE html>
< !-- doci,emt type : 문서타입 html -->
< !-- HTML : HyperText MarkUp Language -->
< html lang="ko">

<!--html 태그-->
<!---->

< head>

<meta charset="UTF-8"><!--characterset UTF-8 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- viewport 설정, 장치 크기에 맞게-->
<title>Document</title>
<!--head쪽에 css파일 ,자바스크립트, 제이쿼리 여기서 세팅~ -->

< /head>< !--head태그 닫고-->
< body>< !--body가 실질적인 화면 쪽 내용이 들어간다.-->
Hello HTML!
< /body>
< /html>

h

< !--heading, header : 제목 만들때 쓰는 태그-->

<h1>제목1</h1>
<h2>제목2</h2>
<h3>제목3</h3>
<h4>제목4</h4>
<h5>제목5</h5>
<h6>제목6</h6>

p

<!--paragragh-->
  <p>
    단락1
    </p>
    <p>
    단락2
  </p>

b,em,i

<!--간단한 글자 꾸미는 태그-->
<!--b : bold 진하게-->
<b>글자1</b>
<!-- em : emphasize : 강조하다-->
<em>글자2</em>
<!-- i : italic-->
<i>글자3</i>

br

  <!-- break line : 줄 바꿈-->
hello <br/>
html <br/>
<br/>
hello html

img

 <!--
    HTML : div, span, a, img, ol, ul, li 이게 거의 8할
    HyperText MarkUp Language
    CSS : display, float, position (요소 배치)
    Cascadimg Style Sheet
    스타일 문서~ (꾸미는 문서~)
    +반응형 (뷰포트,가변그리드,미디어쿼리,플렉스박스)
-->
<!--image source:근원-->
<!--이미지 태그의 src 속성에 파일위치 지정-->
<!--이미지 경로지정
    절대경로, 상대경로-->
<!-- . : 현재위치 -->
<!-- .. : 한칸 상위폴더로 -->
<!-- 상대경로 : 프로젝트 기준으로 위치~ -->
<img src="./images/cat.jpg"/>
<!-- 절대경로 : c:\pictures\my\cat.jpg-->
<img src="C:\Users\YJ\Desktop\html.css\images\JJanggu.jpg"/>
<!--
    상대경로를 주로 쓰는데
    절대경로는 프로젝트를 다른 컴퓨터에 옮기면 이미지 안뜰수있다.
    경로가 안맞아서~
-->

a

  <!--a : anchor : 닻-->
<!--a태그, 앵커 태그 -->
<!-- href 속성-->
<!-- hyper reference : 하이퍼 참조-->
<a href="http://www.naver.com">네이버로이동</a>

a.img

  <a href="http://www.naver.com">
    <img src="./images/naver.jpg"/>
</a>
<a href="http://www.daum.net">
    <img src="./images/daum.jpg"/>
</a>
<a href="http://www.zoom.com">
    <img src="./images/zoom.jpg"/>
</a>
<!--이미지 누르면 네이버로 이동-->
<!--웹사이트에서 로고 누르면 페이지이동~ -->

a.img2

 <a href="http://www.naver.com">
    <img src="./images/naver.jpg" alt="네이버"/>
</a>
<a href="http://www.daum.net">
    <img src="./images/daum.jpg" alt="다음"/>
</a>
<a href="http://www.zoom.com">
    <img src="./images/zoom.jpg" alt="줌인터넷"/>
</a>

style 속성

<a href="http://www.naver.com">
    <img src="./images/naver.jpg" alt="네이버"
    style="width:100px;height:100px"/>
</a>
<a href="http://www.daum.net">
    <img src="./images/daum.jpg" alt="다음"
    style="width:100px;height:100px"/>
</a>
<a href="http://www.zoom.com">
    <img src="./images/zoom.jpg" alt="줌인터넷"
    style="width:100px;height:100px"/>
</a>

style 태그

< style>
/ style태그 /
img{/ img태그 가로세로 크기 지정/
width:100px;
height:100px;
}
< /style>

css파일 분리

ul,ol

div

span

margin

padding

테이블

border

border-top

border-radius

input

form

check

radio버튼

audio

video

embed

iframe

이미지 스프라이트

폰트

구글폰트,링크방식

구글폰트,import방식

폰트 및 이미지 다운 방법

구글에 google fonts,font-awesome,카페24를 검색하여 폰트 및 이미지를 다운받는다
구글에 sprite cow를 검색하여 show images를 클릭하여 파일은 연 후 위치값을 받을 수 있다.
cdnjs에 예를들면 페이스북을 검색하여 나온 링크를 복사하여 출력문에 기입하여 작성도 가능
css sprites generator를 검색 후 이미지들의 크기를 알아볼 수 있다.