본문 바로가기

Python_WEB/HTML

HTML5 - 190608 Basic Study 22(Note)

반응형

HTML 태그
CSS 선택자
CSS 속성
-----------
CSS 레이아웃 설계
CSS 동적인 구현
-----------
반응형 웹 구현
-----------
웹 디자이너 - CSS 코딩 가능
시각 디자이너 - 포토샵 , 일러스트
웹 퍼블리셔 - 자바스크립트 + 제이쿼리
-----------
서버 - AJAX, DB연동
개발자 분야
-----------
emmet
beauty
browse
FTP
-----------
z-coding 설치

웹문서에는 HTML 태그들로 뼈대(골격)을 이루고 있다.

태그를 선택해서 모양을 스타일을 변경하거나 위치 변경 선택자로 선택한다.

1)태그선택자
h2*3

속성:속성값;

color > 글자색상

command > apply cource > formatting 코드정렬하기

h1-6 제목타이틀용 태그

일반적으로 웨버페이지에서 h1태그는 하나이다.

backgrond > 배경

전체선택자 : *{} > 현재 문서에 모든 태그 및 요소(element) 선택

 

<h1 align="center">안녕하세요.</h1>
시작태그 속성=값       텍스트노드  종료태그

 

-> 요소(Element)

margin 마진(외부여백)

padding 패딩(내부여백)

*{}에 많이 쓰는 태그는 margin / padding 이다.

html 태그는 기본적으로 어느정도 마진값과 패딩값이 존재한다. 그래서 사용자가 인위적으로 초기화시켜야 한다.

태그선택자 h1{}

다중선택자 h1{},h2{}

border:1px solid black;
테두리: 선두께 선종류 선색;

5px -> pixel

h2 사이에 여백의 미

주목성, 심미성, 안정성, 디자인성, 합리성, 합목적성

text-alin:center > 박스 내에서 글자 가운데 정렬

아이디 선택자 > #
클래스 선택자 > .

아이디는 현재 문서에서 유일한 이름명이야 한다.
id=

클래스는 이름이 중복적용이 가능하며 대체적으로 공통적인 스타일을 적용할때 클래스명으로 통일한다.
class=

#aa{}

글자색, 배경색, 굵은글자, 기울임글자

font-style:italic
font-size:25px

복합 선택자 h3#aaa{}

h3.aaa{}


태그선택자+아이디(클래스)선택자

html 색상 > 자료실 82번

후손선택자 : 공백
자손선택자 : >

ul>li*5>a[href=#]{선택자$}
순서없는 목록 태그
li 목록태그
a 링크태그

a 태그는 파란색에 밑줄

a{}
ul li{}
li a{}
ul a{}
ul>li>a{}
li>a{}

ul a{} : ul 태그에 자손인 a 태그를 선택해라.

text-decoration:none > 밑줄제거

현재 16px 기본 크기

ul>li>a{}
ul>a{} 선택이 안됨
li>a{} 선택이 됨

font-weight:bold; > 굵은글자

핫존(hotzone) -> 하이퍼링크영역 : 마우스커서가 손가락모양으로 변경된다.

span
b
i
em
strong
ins
del

ul>li>a>span{}
ul span{}
ul li a span{}
ul li span{}

CSS개요 > ui/ux 모바일 104번

css 입력 방식에 따른 분류
1. 인라인 스타일 방식
html 태그 내부에 style 속성을 입력하여 css 속성과 값을 주는 방식, 선택자를 사용하지 않는다.

2. 내부 스타일 방식
head 태그 내부에 style 태그로 영역을 주어서 입력하는 방식

3. 외부 스타일 방식
css 파일을 별도로 생성해서 link 태그나 import로 연결하는 방식

p태그 - 문단 태그 / 글자크기 16px / 글자색 검정색 / 배경색 흰색 / 가로크기 100% / 박스형 태그

a태그 - 글자 태그

link:css -> 젠코딩 css 불러들이기

shitf+f11 windows -> css style : css 불러들이기

windows - tile vertically

[css 기본속성]
글자 관련 속성

font-family 글꼴
font-size 글자크기(px, em, %, pt, pc)
font-weight 굵은글씨(bold, normal)
fong-variant 작은대문자(normal/small-caps)
font-style 기울임글자(italic, normal)

한글은 홋따옴표나 쌍다옴표로 감싼다
영문은 공백이 있으면 따옴표로 감싼다.
처음글꼴이 우선적용이되고 그 이후에 글꼴은 보험용(없으면 불러들인다)

font-size:16px;    : 16px
font-size:1.5em;   : 기본 16px x 1.5
font-size:150%;    : 150%

line-height : 줄간격 ★★★★★

16px -> 32px

{font:italic small-caps bold 12px/24px 돋움;}
style-variant-weight-size/lineHeight-family
순서대로 입력

단위를 입력시 절대치 : cm, mm, pc, pt, ex(소문자 x의 크기)
단위를 입력시 상대치 : %, em, px(모니터 해상도에 따라)

1pt = 1/72인치
1pc = 12pt

구조선택자
:first-child
:nth-child
위치

:first-of-type
:nth-of-type


ul>li*7>a[href=#]{button$}
구조설계(뼈대설계)

css 기본 들어가는 사항
{
margin:0;
padding:0;
}
/* 목록 기호 없애기 */
ul, li{
list-style:none
}
/* 밑줄 없애기 */
a{
color:black;
text-decoration:none;
}

nth-child(2) 2번째
nth-child(2n) 짝수번째
nth-child(2n + 1) 홀수번째

float:left; 박스를 왼쪽부터 순서대로 배치하기 / li박스의 가로크기는 내용물(글자크기, 글자갯수)만큼 가로크기가 변한다.

padding 안쪽 여백
margin 외부 여백

a 글자태그 > 박스태그로 변환
li 박스태그

display:block;

배치공식
자식박스에 float 처리가 되면 부모의 크기는 무너진다(유지가 안된다)
그래서 부모에는 overflow 속성을 준다.
overflow:hidden; 스크롤바 숨기기

브라우저크기를 줄이면 float된 박스는 아래로 떨어진다.
이를 방지하기 위해 부모박스에 일정한 width 값을 준다.

border-radius:20px

동적인 효과 주기

a태그의 글자색은 a태그를 직접 선택해야됨.

3번째 버튼에 마우스롤오버할 때만 a 태그의 글자색을 gold로 바꾼다.
ul li a:nth-child(3){} (x)
ul li:nth-child(3) a{} (o)

반응선택자 : hover 마우스 롤 오버
: active 마우스 누르고 있는 상태

text-decoration:none 밑줄없음
    underline 밑줄
overline 윗줄
line-through 취소선

h${welcome$}*6

first-child
nth-child(3)
형제관계중에 절대적인 위치

first-of-type
nth-of-type(3)
형재관계중에 상대적 위치

14번째 위치한 h6을 선택해라
h6:nth-child(14){}

h6 태그중에 2번재 위치한 태그를 선택해라
h6:nth-of-type(2){}

동위선택자(친구선택자) A+B A 다음에 바로 나오는 B / A~B A다음에 나오는 B들

동적인요소구현 - 제어기능

디자인격언
스티브잡스 친구 디자이너가 디자인은 숨기는 것이다.

삼성갤럭시폰 배터리를 숨기기(일체형)

일체형PC

display:none; 숨기기

focus <-> blur
커서놓기 <-> 커서나가기

input:blur{} 지원안됨 제이쿼리나 자바스크립트로

상속에 대해서
스타일 우선 순위

폴더 세트 : img(이미지) / css(css) / js(자바스크립트)

css단위
색상단위

키워드
h5{
color:red;
}

16진수
h5{
color:#f00;
}

h5{
color:#ff0000;
}

h5{
color:rgb(255,255,0);
}

h5{
color:rgba(255,0,0,0,5);
}

color 알파 -> 불투명도 0~1 사이의 소수점
color:hsla(색상, 채도,명도)
0~360, 0~100%, 0~100%
hue, saturation, lightness, alpha

디자인
콘셉 - 글꼴, 어떤색상 위주
기획단계
border:0;
border:5px solid transprent; 투명색

..상위폴더 이동
하위폴더로 이동하기

./html/css
  /img
  
display:none 숨기기
display:inline 글자형태변환
block 박스형태로 보이기
inline-block

인라인글자-span,a
-가로세로크기변경이 안됨
-가로로 배치

박스-블럭(div)
-세로로 배치
-가로 세로 크기 변경 가능

인라인블럭
가로세로크기변경 가능
가로방향으로 배치
img 태그
input

마진(외부여백)
인라인태그는 좌우마진적용된다.
상하마진은 안된다.
line-height

숨김속성
display:none
visibility:visible/hidden
opacity:0~1 불투명도

반응형