<1> 웹 동작 개념
(html 을 받는 경우)
(데이터만 받는 경우가 훨씬 많다.)
(1) 웹페이지: 서버에서 미리 준비해두었던 것을 '받아서' '그려주는 것'.
* 즉, 브라우저가 하는 일은
- 1. 요청을 보낸다.
(서버가 만들어 놓은 "API"라는 창구에 미리 정해진 약속대로 요청을 보냄)
- 2. 받은 HTML 파일을 그려준다.
<2> HTML
(1) 개념
- HTML : Hypertext Markup Language
- 브라우저 화면에 표시되는 문서를 작성하는 데 쓰는 Markup 언어
(2) 역할
- 태그(tag) 라고 불리는 요소들을 이용해 화면 분할
- 텍스트와 이미지, 하이퍼링크 등을 배치
- 개발자 도구에서 elements 탭 > 웹페이지 구성하는 HTML 요소 확인 가능
- 각 태그들은 보통 시작 태그 <태그> 와 종료 태그 </태그> 한쌍으로 이루어짐
- HTML 각 태그에 style 속성 부여해 크기, 정렬, 글꼴 색 등을 정해 꾸며줄 수 있지만
- CSS( Cascading style Sheets) 를 이용하면 한 곳에 모아볼 수 있고, 여러 요소에 같은 속성 부여 가능
(3) 기초
- 크게 head 와 body 구성
- head 안 : 페이지 속성 정보
: 대표요소 ex) meta, script, link, title
: 사용 ex) <head> 페이지 속성 정보</head>
- body 안 : 페이지 내용
: 대표요소 ex) div,p,img
: 사용 ex) <body> 페이지 내용<body>
(4) 코드 정렬 단축키
- shift + Alt + F
(5) <meta charset "UTF-8">
- 파일의 인코딩을 알려주는 태그
- 인코딩 : HTML파일을 웹브라우저에 표시될 수 있도로 변환 처리하는 작업
- 문자 코드셋 : 파일의 정보가 어떤 언어로 될지 지정이 필요
- <meta charset="UTF-8">는 유니코드 언어를 위한 문자셋
-text 를 어떻게 그려달라는지 말해주는 것
-없으면 한글, 특수문자 깨질 수 있음
(6) <meta> 태그의 name 속성
- 메타데이터를 위한 이름 명시
- name 속성이 명시되면, content 속성도 함께 명시
- ex) <meta name="author" content"yoon"> : 문서의 저자를 명시함
(7) <li>
- list item 의 약자
- 순서가 중요하지 않은 목록을 만드는 태그
- <ul> 태그 안에 쓰임
(8) <ul>
- unoderd list
- 순서가 중요하지 않은 목록
- 순서가 중요한 목록 태그 <ol>
(9) bullet point!1
- 원형 점
(10) <a>
- 하이퍼링크를 걸어주는 태그
(11) href
- hypertext reference
- 연결할 주소를 지정하는 속성
(12) <hr>
- 가로줄 태그
- 종료 태그가 따로 없음 (empty 태그)
(13) <span>
- 특정 글자를 꾸밀 때 쓸 수 있음
- ex) <span style="color:red">글자</span>
(14) src 속성
- <source>
- 미디어 파일 url 명시
-예) <img src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"/>
(15) <input>
- 사용자가 데이터를 입력할 수 있는 필드 형성
(16) <textarea>
- 여러 줄을 입력할 수 있음
<4> CSS
(0) Cascading Style Sheet 의 약자
(1) 선택자 (selector)
- 무엇을 꾸미려면 'select' 해야 가능
- class 값으로 '이름표' 달아줌
- 예) mytitle 이라고 이름표 달아주고 글씨를 빨간색을 바꾸라고 하는 것
(2) 사용법
- 부모 자식 구조 중에 부모요소에 디자인을 적용하면 자동으로 안쪽 지식 요소까지 디자인 적용됨
- <head> ~ </head> 안에 <style> ~ </style> 로 공간을 만들어 작성
-예) <head>
<style>
</style>
</head>
- 클래스를 가리킬 때 .을 빼먹지 말자
(3) CSS 사용법
- id 선택자 : #을 맨 앞에 붙여 사용함
: 원칙적으로 하나의 객체에만 사용됨
- class 선택자 : .을 맨 앞에 붙여 사용함
: 여러 객체에 적용할 수 있음
- width, height : 가로길이, 세로 길이
: 값을 정의할 때 px, % 사용
- > : 자식 선택자는 > 뒤에 적는다
: ex) # 아이디 > 태그
(4) 구글 폰트 사용법
- 참고 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=anonymousx&logNo=10183487261
[구글웹폰트]Web font - @import url / link href 적용방법
웹폰트 종류(WOFF, EOT, TTF, SVG) HTML, CSS적용방법(@import url / link href)...
blog.naver.com
- <head> 와 </head> 사이 (둘 중 하나)
1.<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates' rel='stylesheet' type='text/css'>
2. @ import url(http://fonts.googleapis.com/css?family=Montserrat+Alternates);
- css 에 적용
1. .(class명) {
font-family: '적용폰트명', '서브폰트명';
}
<5> 부트스트랩
(1) 무료 프론트엔드 프레임워크, 쉽고 빠른 반응형 웹 디자인 만듦
(2) jumbotron
- 메인 전광판이라는 뜻
- 정보에 대한 강조를 위한 패딩 처리된 큰 상자
(3) class="lead"
- 문단을 강조하는 클래스
- 글자크기와 줄 간격이 커진다
(4) 카드 제작
- 참고 : https://webty.tistory.com/40
7. 부트스트랩 카드 디자인
부트스트랩 카드 디자인 카드 클래스 부트스트랩은 카드 클래스를 제공합니다. 이 클래스를 활용하여 위와 같은 카드결과를 간편하게 표현할 수 있습니다. 카드 제작1. 내용 만들기 Basic card 카
webty.tistory.com
- 카드 레이아웃
<div class="card-colums".
<div class="card">
<div class="card-img-top" src="...jpg" alt="card image cap"> </div>
<div class="card-body">
<a href = "http://naver.com/" class="card-title"> 기사제목 (링크)</a>
<p class = "card-texrt-comment"> 요약 내용 </p>
</div>
</div>
- 카드 이미지 위에 텍스트 띄우기
<div class="card">
<img class="card-img-top" src="url" alt="">
<div class="card-img-overlay">
...
</div>
</div>
(5) 화면을 가운데로 가져오기
- 요소 전체를 감싸는 div 를 만들어 width 를 주고 margin:auto 사용
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width", initial-scale=1.0"
<title> 로그인 페이지 </title>
<style>
.wrap {
margin : 10px auto;
width: 300px;
}
</style>
<head>
<div class"wrap">
<div class="jumbotron">
...
</div>
</div>
(6) display class
- display-n 으로 제목을 나타냄
- .lead 를 추가해서 단락을 눈에 띄게 만든다
- 예시
<div class="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to
featured content or information.</p>
<hr class="my-4">
(7) border style 속성
- solid : 테두리를 실선으로 설정함
(8) margin 속성
- 하나의 margin 에 여백 값 다 쓰는 법
- margin: _px; auto => 한개의 값 : 모든 4면의 여백
- margin:_px auto _px auto; => 두개의 값 : 첫 번째 '위와 아래', 두 번째 : '왼쪽 오른쪽'
- margin:_px auto _px auto _px auto; => 세 개의 값 : 첫번째 '위', 두 번째 '왼쪽,오른쪽', 세번째 '아래'
- margin:_px auto _px auto _px _px auto; => 네 개의 값 : 상 우 하 좌 순서로 여백 지정 (시계방향)
'JUNGLE' 카테고리의 다른 글
| JavaScript (2) | 2024.01.09 |
|---|