0402 uiux 3일차(속성, 보더, 패딩)

0402 화 uiux 3일차

웹코딩 참고 사이트 김영원 강사님 ( https://kimyws.tistory.com/29 ) ( https://webstoryboy.co.kr/ ) 플렉스 개구리 ( https://flexboxfroggy.com/#ko )

혜지 강사님 수업페이지(html&css) ( https://codepen.io/hjyee/full/OJGrVYJ ). 자바스크립트 수업페이지 ( https://codepen.io/hjyee/full/PogMVOP ) 깃허브 기초 ( https://codepen.io/hjyee/full/LYoNWga ) 기초 키보드 사용법 ( https://codepen.io/YoungHeom/pen/eYaOYEX ) 연산자 ( https://codepen.io/YoungHeom/pen/Rwmbxze ) 코드펜 사용법 ( https://codepen.io/YoungHeom/pen/gOJOWgE ) 무료 강의 ( https://programmers.co.kr/ ) 피그마 강좌 ( https://www.youtube.com/@yeonjung-figma ), ( https://www.youtube.com/@UXUIDesign ) - 개인적 메모 작업물 보기 - 핀터레스트나 드리블( https://dribbble.com/ ), 노트폴리오, 비핸스 자격증 기출문제 ( https://www.comcbt.com/ )( https://quizeey.com/ )

 

책없으면 ncs에서 pdf 다운받기

당분간은 디지털디자인 구성요소 설계, 구현 2권만 가져오면 됨

압축

---

포토샵 투명픽셀 잠그고 브러쉬로 칠하면 투명한 부분은 색칠 안됨

---

link 태그?는 head에 들어감(저번시간에 했던 건데 일단 메모)

 

텍스트 정렬. text-align

(위아래로) 태그 복사: alt+shift+위아래 방향키

태그 하나 커서 놓고 alt 위아래 방향키 누르면 위아래 태그들이랑 순서 바꿀 수 있음

 

텍스트 컬러 3가지 형태

1. 키워드

2. rgb 색상코드

3. rgb 함수

 

함수형태를 넣어줄 때는 혼합 형태 X

%를 넣다가 수치값을 넣어주는 것

 

ff00ff 두 자리씩 같으면 f0f으로 쓸 수 있음. 0.3은 투명도값임

 

display (태그의 속성값을 바꾼다)

보여지는 형태를 어떻게 넣어줄지 지정을 해준다.

 

3가지만

None 논: 보이지 않음

block 블럭

inline 인라인

inline-block 인라인 블럭

 

인라인 border-width

 같은 줄에 나란히 배치

 객체가 뒤에 들어간다. 

 크기 콘텐츠(텍스트, 이미지 등) 너비(좌우 길이) 차지

 너비&높이를 직접 설정 불가능

 여백 상하 여백 미적용. 좌우는 적용한다.

 

 Q. 어디에 쓸까? 텍스트 일부를 스타일링할 때, 하이퍼링크(a), 이미지와 미디어

 

 

블록 

 새 줄에서 시작.(페이지의 한 줄 만큼만 차지. 한 줄에 하나)

 사용 가능한 전체의 너비를 차지한다.

 크기는 부모 요소의 너비를 차지한다.

 너비&높이를 직접 설정 가능

 여백은 상하좌우 모두 설정 가능

 

 Q.  어디에 쓸까? 주요 섹션, 레이아웃 요소를 구성할 때, 문단 구분할 때, 제목과 하위제목&내용, 목록 생성

 

 

인라인 블록 요소(인라인처럼 배치되나 블럭의 속성도 갖고 있음)

 인라인처럼 같은 줄에 배치

 블록처럼 너비, 높이 지정이 가능하다.

 너비, 높이, 여백 설정이 가능하다.

 

 Q. 어디에 쓸까? 인라인 요소인데 너비와 높이가 필요한 것, 수평으로 된 메뉴, 내비게이션 바(탑바?), 그리드 또는 타일 레이아웃

 

 

※ 참고로

<span>ab</span><span>cd</span> 가로로 쭉 작성 시 결과

adcd

 

<span>ab</span>

<span>cd</span> 엔터 치고 작성 시 결과

ab cd

 

너비

인라인(콘텐츠너비)

블럭(100%)

인라인블럭(콘텐츠너비)

 

한 줄 배치

인라인(여러 개)

블럭(하나만)

인라인블럭(여러 개)

 

크기

인라인(크기가 없다.)

블럭(너비&높이 설정 가능)

인라인블럭(너비&높이 설정 가능)

 

여백

인라인(좌우)

블럭(상하좌우)

인라인블럭(상하좌우)

 

너비, 한줄  인라인적

크기, 여백  블럭적

---

border (모작할 때 많이 볼 듯한)

 테두리

 하위속성

 혼자서도 사용가능

 border 크기 종류 색

 solid 직선 / dotted 점선 / dashed 긴 점선

 

스판이랑 div의 테두리 선이 겹치는 군...

 

bodrer-color

width

style

 

width

1가지 형태

상하좌우

상하 좌우

상 좌우 하

상 우 하 좌

 

브라우저 요소를 렌더링할 때

각각의 요소는 사각형 형태를 유지한다.

 

이 영역을 박스라고 표현

 

바깥 여백(margin 다른 요소와의 외부 여백을 제공)

배경색, 배경이미지에 영향을 받지 않는다.

 

테두리(border 테두리 요소, 외곽선을 형성) 

 

안쪽 여백(padding 테두리 사이 내부 콘텐츠와의 여백을 표현한다.)

 

콘텐츠 영역(div, span 등): 실제 콘텐츠의 크기(너비&높이를 기본크기로 가진다.)

콘텐츠-패딩-보더-마진 순서로 점점 바깥

요소의 실제크기

콘텐츠, padding, border

 

margin 요소의 간격만 설정해준다.

 

border, padding을 바꾸다보면 요소의 실제크기 변경

그럴 땐 box-sizing을 사용할 수 있음

box-sizing: 속성값

content-box(너비와 높이가 콘텐츠기준)

border-box(너비와 높이 콘텐츠, padding, border)