자바스크립트

▶자바스크립트는 선 마이크로시스템즈 (Sun MicroSystems) 와 넷스케이프에서 공동으로 개발한 스크립트 언어.

▶객체지향적 언어 (주의! 객체언어는 아니다.)

▶웹 브라우저가 직접 번역하여 수행(=엔진을 가지고 있다.)하기 때문에 인터프리터(해석기)에 의해 실행되고, 컴파일 과정 (컴퓨터언어)이 없다.

→구글 크롬이 많이 사용 되는 이유 : 자바스크립트 언어를 빨리 해석함.

▶문법이 비교적 간단(=보조적인 수단이 필요가 없다.)해 쉽게 프로그래밍할 수 있다

▶플랫폼에 독립적(=어딘가에 귀속되어 있지 X)이라 이식성이 높다. 즉, 모든 운영체제, 하드웨어에서 사용할 수 있다.

 

HTML에서 자바스크립트 사용하는 방법 (6가지)

1. 직접 코딩하는 방법 2가지 (지금 실무에선 사용하지 않는다. 최초 자바스크립트 이용 시 사용 했던 내용)

▶<script language="javascript"> 자바스크립트 구문 </script>

▶<script type="text/javascript">

<!--

자바스크립트 구문

//-->

</script>

▶웹 표준에선 권장하지 않는 방법으로 지금은 사용하고 있지 않지만 웹디자이너 기능사 시험에선 출제 多

▶자바스크립트를 지원하지 않는 브라우저가 없으므로 이 방법은 더 이상 사용하지 않는다.

▶이전에는 브라우저 중에서 지원하지 않는 경우가 있어서 자바스크립트가 문자열로 인식되기 때문에 주석 처리를 하였다.

2. <head></head> 안에 작성 하는 방법

▶html 을 브라우저가 인식하는 과정 (구문 해석하는 과정)에서 script 를 만나면 해당 내용 혹은 파일을 fetching 하고 executing 한 뒤에 나머지 html 을 인식하게 됨으로 script의 파일이 크고 많은경우 html 을 해석하는데 많은 시간이 걸리게됨

 

3. body 태그 하단에 script를 작성하는 방법

▶모든 html 을 다 해석한 뒤에 스크립트를 fetching 하고 executing 하기 때문에 순서상으로는 문제가 되지 않지만 자바스크립트의 내용이 중요한 문서의 경우 script의 fetching이 늦어지는 문제가 발생

 

4. head 태그 안에 사용하면서 속성값 async를 사용하는 방법 (병렬적 사용방법)

▶async 의 문제점 : fetching 이 완료되는 시점에 기존의 작업을 멈추고 executing 을 시작하므로 html 을 해석하기 전의 시점일경우 제대로 작업하기 힘들고 , 여러개의 스크립트가 있을경우 먼저 fetching 된 스크립트 먼저 실행하는 문제가 발생

 

5. head 태그 안에 사용하면서 속성값 defer를 사용하는 방법 (병렬적 사용방법) (가장 적절한 방법)

▶script 구문을 만나 fetching 만하고 html 구문을 모두 해석한 뒤 executing 을 하게됨

 

 

inset과 gap

▶최근 CSS에서 자주 사용하는 코딩

▶top: 100px;

  left: 100px;

  right: 100px;

  bottom: 100px;

=

inset: 100px;

▶마진은 부모와 자식요소 사이에 거리를 주지만 gab은 요소와 요소 사이의 거리만 계산한다.

▶margin은 자식요소에 코딩, gap은 부모요소에 코딩

▶gap은 내부의 자식요소들이 일정한 간격으로 떨어져 위치 할 수 있도록 사용하는 스타일 속성이다.

 

▶margin과의 차이점은 gap의 경우 요소들의 사이에만 공간을 만든다는 점이다.

▶margin의 경우 주변에 요소들의 유무에 상관 없이 스타일이 적용(사이에는 중첩이 된다.)

▶EX) margin:10px;의 경우 중간에 겹쳐져 20px의 간격이 된다.

▶하지만 gap은 인접요소가 없다면 불필요한 공간을 만들지 않고 정확하게 간격을 10px만 만든다.

 

▶gap은 flex 이후부터 필요성이 생겨서 만들어진 속성이다. 불필요한 공간을 만들지 않아서 더욱 정렬된 상태의 레이아웃을 구현할 수 있기 때문에 사용하기 시작했다.

▶margin 전방향;

   margin 상하, 좌우;

   margin 상 좌우 하;

   margin 상 우 하 좌;

  gap 전체값;

  gap 상하 좌우;

  3,4개의 사용법이 없다.

gap : 10px
margin: 10px;

'코린이 개념잡기 > CSS' 카테고리의 다른 글

마진 상쇄(margin collapsing)  (1) 2024.11.29
미디어 쿼리(media query)  (0) 2024.02.09
flex 2  (0) 2023.03.16
Flex  (0) 2023.03.15
그림자 효과  (0) 2023.03.14

기본 시작화면

▶order : 자식 요소의 순서를 지정, 숫자가 작을수록 앞쪽으로 배치된다. 

order 값 부여

▶flex-grow : 요소 안쪽의 여백을 확대. 기본값 = 0, 0을 주면 늘어나지 않는다.
1부터 부모의 너비를 다 차지하려고 늘어난다.

flex-grow 값 부여
작은 크롬 창에서 본 flex-grow
크롬 창을 늘리면 부여해준 값에 따라 일정 비율로 늘어난다.


▶flex-shrink : 요소 안쪽의 여백을 축소. 0을 주면 줄어들지 않음
1 이상의 값을 주면 : 부모의 너비에 따라서 주어진 비율로 줄어든다.

flex-shrink 값을&nbsp; article의 첫번째 요소에 부여
크롬 전체화면에서 본&nbsp;flex-shrink

 

크롬 창을 줄이면 부여해준 값에 따라 일정 비율로 줄어든다.


▶flex-basis : 기본 박스의 단위를 지정한다. px, %로 값을 부여하는 것이 가능하고, 혹은 1, 2 같은 비율로도 지정이 가능하다.

flex-basis 값 부여
크롬 전체화면에서 본&nbsp;flex-basis
크롬 창이 줄어들면 부여해준 값이 유지되진 않는다. 일정비율로 균일하게 줄어든다.

▶flex : 1; = flex: 1 1 0%
→flex-grow:1; flex-shrink:1; flex-basis:0%;
⇒부모를 다 차지하는데 고르게 차지한다.
줄어 들 때 고르게 줄어들어라.
기본 단위는 부모값을 따른다.

⇒자식요소가 부모요소를 (같은 비율로) 전체 다 차지한다.

'코린이 개념잡기 > CSS' 카테고리의 다른 글

미디어 쿼리(media query)  (0) 2024.02.09
inset과 gap  (0) 2023.03.17
Flex  (0) 2023.03.15
그림자 효과  (0) 2023.03.14
Float & Clear  (0) 2023.03.14

FLEX 속성

▶기본적으로 아이템을 좌측에서 우측, 수평 방향으로 배치한다. 우측에서 좌측이나, 수직방향으로 배치하려 할 때에도 사용할 수 있다.

 

flex : 부모요소에 적용하는 속성

display : flex; → 부모인 자신은 블록요소 속성으로 유지하고, 자식 요소에 flex환경을 설정해서 좌우배치를 한다.

display : inline-flex; → 부모인 자신은 인라인 요소 속성으로 유지하고, 자식요소에 flex 환경을 설정해서 좌배치를 한다.

기본 display : flex = row값만 줬을 때와 동일

 

display : inline-flex

flex-direction : 자식요소의 정렬 방향을 지정한다.

: column / column-reverse / row / row-reverse

row(가로): 기본축이 가로로 정렬 (기본값) 좌 → 우

column (세로): 기본축이 세로로 정렬(block 요소일 경우 flex하기 전과 같음) 위 → 아래

reverse(반대): 자식요소 콘텐츠를 가로/세로 역순으로 정렬 우→좌 / 아래→위

column
row-reverse
column-reverse


flex-wrap:자식 요소의 줄 바꿈을 적용시킨다.

wrap: 자식요소의 줄 바꿈 가능 (기본값)

nowrap: 자식요소의 줄 바꿈 불가능, 요소의 부피 때문에 공간이 부족해도 줄바꿈X

row + nowrap
column-reverse + nowrap


flex-flow: flex-direction와 flex-wrap을 한번에 적용

단점, 자바스크립트에서 인식을 하지 못해서 잘 사용하진 않음.

EX) flex-flow: row-reverse wrap;

 

justify-content : 기본축으로 정렬하는 방법을 제공

flex-star : 기본값, 자식요소를 시작방향으로 정렬

flex-start

flex-end : 자식요소를 종료방향으로 정렬

flex-end

center : 자식요소를 가운데로 정렬

center


space-between : 자식요소 사이에만 균일한 간격을 두고 정렬

즉, 양 끝에 자식요소를 하나씩 배치하고 남은 공간을 균일한 간격을 두고 정렬

space-between

space-around : 모든 자식요소의 둘레에 균일한 간격을 두고 정렬

→ ( 1 2 2 2 1 )

space-around

space-evenly : 모든 자식요소의 균일한 간격을 두고 정렬

→ 간격을 동일하게, 끝과 끝 배치X, 사이에 간격 겹치지X ( 1 1 1 1 1 )

space-evenly

 

align-items : 반대축으로 정렬하는 방법을 제공

▶align-items : center; 반대축의 중앙에 배치하는 방법

space-evenly + center

▶align-content : space-between, space-around, space-evenly를 사용하기 위한 방법

 

★felx로 요소를 중앙에 배치하는 방법★

부모요소에 display:flex; 부여하고, justify-content :centerl, align-items : center; 가운데 배치 완성

 

'코린이 개념잡기 > CSS' 카테고리의 다른 글

inset과 gap  (0) 2023.03.17
flex 2  (0) 2023.03.16
그림자 효과  (0) 2023.03.14
Float & Clear  (0) 2023.03.14
CSS 선택자  (0) 2023.03.14

그림자 효과

▶box-shadow와 text-shadow 가 있다.

▶X축 / Y축/ 블러 / 퍼지는 효과 / 색깔

→보통 바깥으로 퍼지는 그림자

→inset을 설정하면 안쪽으로 퍼지는 그림

▶box shadow: x position y position blur spread color;

EX )box-shadow: 5px 5px 5px 5px gray;

▶box-shadow: 5px 5px 5px 5px gray inset;

▶x-position(필수) : 가로 위치 . 양수(+)면 오른쪽에 , 음수(-)면 왼쪽에 그림자가 만들어진다 .

▶y-position(필수) : 세로 위치 . 양수(+)면 아래쪽에 , 음수(-)면 위쪽에 그림자가 만들어진다 .

▶blur : 그림자를 흐릿하게 . 값이 클 수록 더욱 흐려 집니다

▶spread : 양수(+)면 그림자를 확장하고, 음수(-)면 축소한다.

▶color : 그림자 색을 정한다.

▶inset : 그림자를 안쪽으로 넣어줍니다 . 기본값은 바깥쪽에 그림자를 넣어주는 것이다.

 

'코린이 개념잡기 > CSS' 카테고리의 다른 글

flex 2  (0) 2023.03.16
Flex  (0) 2023.03.15
Float & Clear  (0) 2023.03.14
CSS 선택자  (0) 2023.03.14
CSS 색상, RGB, 16진법 표기  (0) 2023.03.14

Float & Clear

▶CSS의 float 속성을 이용하면 웹페이지의 요소를 공중에 띄워서 화면의 좌측 또는 우측에 배치할 수 있다.

▶float은 우리말로 하면 '(물 위나 공중에서) 떠가다, 뜨다, 부유하다' 등의 뜻이 있다.

▶하나의 요소에 float 속성이 적용되면 그 다음에 오는 요소들도 계속해서 float 속성의 영향을 받게 된다.

▶float 속성이 적용된 요소 다음에 오는 요소를 float 속성의 영향을 받지 않고 새로운 줄에 배치하고자 할 때에는 clear 속성을 사용한다.

▶clear 의 속성 값 = left, right, both : 이전에 사용된 'float:left(right, both)'의 기능을 해제한다.

 

float으로 레이아웃을 잡는 방법

1. 가로로 배치하고자 하는 요소와

(좌우로 배치하고자 하는 요소)

같은 항렬 모두에 float:left;을 쓴다

2. 부모요소에 float을 해제한다


float은 float이라고 적용된 자식요소를 부모 요소가 높이를 인식하지 못한다.

해결방법 : 플롯을 해제한다

플롯 해제 방법

가상선택자를 잡아서 해제하는 방법

1. 부모에 높이값이 있다면 지워야한다

2. 부모요소에 :after로 가상선택자를 잡아

3. 가상선택자안에

content: '';

display: block;

clear: both; 를 적는다

4. 특이사항 : 하나라도 float을 적용한다면 float이 필요없는 나머지요소들도 모두 float을 적용시켜야 한다.

 

'코린이 개념잡기 > CSS' 카테고리의 다른 글

Flex  (0) 2023.03.15
그림자 효과  (0) 2023.03.14
CSS 선택자  (0) 2023.03.14
CSS 색상, RGB, 16진법 표기  (0) 2023.03.14
display  (0) 2023.03.14

CSS 선택자

▶CSS의 선택자(selector)는 CSS로 꾸미고자 하는 HTML의 영역을 선택하는데 사용된다.

1. 클래스 선택자 : .

.txt : 클래스가 txt인 모든 요소를 선택


2. 클래스 선택자_both (띄어쓰기 X)

.txt.is : 클래스가 txt 이면서 is를 동시에가지는 요소를 선택


3. 자손 선택자 : (사이에 띄어쓰기 되어있음)

.txt .is : 클래스가 txt인 요소의 자식 중 클래스가 is인 요소를 선택


4. 아이디 선택자 : #

#txt : 아이디가 txt 요소를 선택


5. 전체선택자 : *

* : 모든 요소를 선택

.txt* : 클래스가 txt인 요소 전부다! => 실무에선 잘 사용하지 않는다.

reset.css에서나 사용하는 정도..?


6. 요소선택자

태그이름 : 태그 전부를 선택

EX) p : p태그 전부를 선택


7. 직계자식 선택자 : >

.txt>p : 클래스가 txt인 요소의 자식 중에 직계(바로 뒤에 오는) p태그를 특정해서 선택

cf) .txt p VS .txt>p 다른 선택자이다.

1. class가 txt인 요소 안에 모든 p태그

2. class가 txt인 요소 안에 바로 직계 p태그


8. AND 선택자 : ,

.txt, .text : 클래스가 txt인 요소와 클래스가 text인 요소를 선택


9. 인접 형제 선택자 : +

.txt + p : 클래스가 txt인 요소 바로 뒤에 배치된 첫번째 p태그


10. 일반 형제 선택자 :

.txt ~ p : 클래스가 txt인 요소부터 모든 p태그를 선택


11. 속성 선택자

11-1. : @[]

a[href] : a 태그 중에 속성이 href가 있는 모든 요소

11-2. : @[=""]

a[href="http"] : a 태그 중에 속성 href의 값이 http인 모든 요소

11-3 : @[~=""]

a[href~="http"] : a 태그 중에서 속성 href의 값 중 http 가 포함된 모든 요소

11-4 : @[^=""]

a[href^="http"] : a 태그 중에서 속성 href의 값 중 http로 시작하는 모든 요소

11-5 : @[$=""]

a[href$="http"] : a 태그 중에서 속성 href의 값 중 http로 끝나는 모든 요소


12. 구조 가상 선택자

구조적 가상클래스란 문서 구조에서 위치나 다른 요소와의 관계에 따라

요소를 선택하게 해주는 선택자이다.

E:nth-of-type() E와 같은 유형인 요소중에 (n)번째인 요소

E:nth-child() E의 부모요소에서 n번째에 해당하는 자식요소

단, 그 n번째의 요소가 E와 같은 유형이 아닐경우 해당되지 않음


부모태그 해당요소:nth-child()

부모태그 해당요소:nth-of-type()

부모태그 해당요소:last-child

부모태그 해당요소:last-of-type

(괄호 안에) 음수가 들어가면 무시가 된다.


13. 상태 선택자

13-1

a:focus : 포커스가 있는 요소, 포커스란? 탭으로 넘어가지는 상태

ex) 플레이스테이션에서 스틱으로 포커스를 옮길 수 있다.

13-2

input:checked : 선택된 모든 input 요소( 선택이 가능한 것은 checkbox, radio 버튼)


14. 가상 선택자 (혹은 문자 선택자)

14-1

a::after : a 태그 요소의 뒷부분에 가상으로 만들어지는 요소를 선택

가상으로 만들어지기 때문에 가상 선택자라고도하고,

문자를 넣을 수 있어서 문자 선택자라고도 한다.

14-2

a::before : a 태그 요소의 앞 부분에 가상으로 만들어지는 요소를 선택

 

가상선택자

▶CSS에서 가상으로 컨텐츠를 추가 가능

▶html 에 들어가는 내용이 아니므로 스크린리더기가 정보를 읽지는 못함

▶꾸미는 효과로 주로 사용하고, 스크린 리더기가 읽으면 안되는 요소를 만들 때 사용

▶가상요소에 태그는 넣지 못하고 오로지 텍스트만 입력가능

'코린이 개념잡기 > CSS' 카테고리의 다른 글

그림자 효과  (0) 2023.03.14
Float & Clear  (0) 2023.03.14
CSS 색상, RGB, 16진법 표기  (0) 2023.03.14
display  (0) 2023.03.14
요소의 위치를 정하는 속성 (Position)  (0) 2023.03.14

CSS 색상

▶입력 방법이 다양함

⑴ 미리정해저 있는 컬러이름

EX) red, blue, green 등

⑵ RGB 색상코드를 사용하는 방법

EX) rgb(0,255,200)

⑶ RGBA 색상코드를 사용하는 방법

EX) rgba(0,100,255,0.3)

⑷ 16 진법 색상코드를 사용하는 방법

EX) #0042af

 

RGB (Red, Green, Blue)

▶Red, Green, Blue 빛의 3 원색을 조합하여 만드는 색상표로 0~ 255 까지의 범위를 가진다.

▶0 은 없음 즉 흑색을 255 는 백색을 의미한다

▶rgb(255,255,255) 는 백색

▶rgb(0,0,0) 은 흑색

 

16진법 표기 웹 색상 표기법

▶16 진법 : 0~F (0123456789 abcdef) 의 표현으로 색상을 표시하는 기법으로 6 자리를 가진다

▶#으로 시작해서 뒤에 red, greed, blue 의 채널을 16 진법으로 표시한다

EX) dc143c (다홍색)

▶단 3 가지 채널의 값이 모두 각각 같은경우 6자리가 아닌 3 자리로 쓸수있다

EX) #00ff33 => #0f3

 

'코린이 개념잡기 > CSS' 카테고리의 다른 글

Float & Clear  (0) 2023.03.14
CSS 선택자  (0) 2023.03.14
display  (0) 2023.03.14
요소의 위치를 정하는 속성 (Position)  (0) 2023.03.14
CSS 텍스트 효과, 배경(background)  (0) 2023.03.13

display

▶레이아웃을 위한 속성이다. 태그의 속성을 변경 할 수 있다.

▶block, inline, inline-block, none / none 은 태그를 없애는 것

▶모든 HTML 요소는 display 속성의 초기 값이 미리 설정되어 있어 설정된 대로 요소가 화면에 표시된다.

▶inline-block 속성 : 인라인 방식에서와 같이 요소가 수평으로 배치되지만 줄 바 꿈은 일어나지 않는다.

→base는 인라인 속성이다.

 

요소의 위치를 정하는 속성 (Position)

▶위치라는 개념을 요소에 부여하기 위한 속성값으로 요소(element)의 좌표값을 부여하기 위해서 필수로 우선 부여해야된다.

▶브라우저의 좌표 : URL 창을 제외한 브라우저의 좌측 상단 지점이 기준점(0,0)이고 수평축(가로)을 X, 수직축(세로)을 Y로 둔다.

▶위치는 x, y, z 축의 개념이 있으며, x 는 left, rigth y 는 top, bottom 이 있고 z 는 z index 라는 요소가 있다.

sticky : 기본값, 움직임X

relative : 기준을 부여해줌. 브라우저의 좌상단이 항상 기준이라고 했는데 어느 위치에서 해당 요소를 기준점이라고 부여하면 기준점이 이동한다. 해당 요소에 아무런 영향을 끼치지 않음. 단순히 기준점만 가지고 온다.

absolute : 엄청 중요한 요소! 해당 요소에 지대한 영향을 끼친다. 자식 요소에 사용할 경우 부모요소가 인식을 하지 못한다. 해당 요소를 뜯어내 기준점 위에다 붙힌다.

fixed : 브라우저에 해당 요소를 고정. 유지시키는 속성. ex)네이버 웹 사이트에서 스크롤을 내려도 검색창은 고정된다. 단순히 포지션만 부여할 경우 사용

 

강제 줄 바꿈

▶br은 HTML에서 강제 줄 바꿈 태그이다.

▶CSS에서 white-space : 공백 문자 처리 방식을 지정 할 수 있다. css로 더 깔끔하게 줄 바꿈 지정 가능

EX) div {white-space : pre-line;} = <br>

 

+ Recent posts