profile
안녕하세요 이동주입니다
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (24) ~ (25)

Overwatch 캐릭터 선택 예제 index.html main.css

19분 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (21) ~ (23)

21. 전환 전환 효과? 전 상태와 후 상태 사이의 중간 상태를 자연스럽게 만들어 주는 것 transition 요소의 전환(시작과 끝) 효과를 지정하는 단축 속성 transition: 속성명 지속시간 타이밍함수 대기시간; => 지속시간은 단축형으로 작성할 때 필수속성

약 1시간 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (18) ~ (20)

1차원에 레이아웃을 만드는 개념이라고도 불림block 요소는 기본적으로 수직으로 쌓아지는 성질이 있음만약 수평으로 쌓고 싶다면?!부모 요소에 display: flex를 추가하면 됨=> 플렉스를 추가한 후부터의 부모 요소는 Flex Container라고 불림=> 또한 그

약 22시간 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (15) ~ (17)

요소의 위치 지정 기준top, bottom, left, right, z-index를 사용해서 개별로 지정 가능=> 모두 음수 사용 가능기준을 먼저 정하고 위치를 정해야 함static) 기준 없음(기본값)relative) 요소 자신을 기준absolute) 위치 상 부모

약 23시간 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (11) ~ (14)

요소 투명도1) 불투명(기본값)0~1) 0부터 1까지의 소수점 숫자=> 요소에 opacity: 0.~ 추가(0 생략가능)글자의 기울기nomal) 기울기 없음(기본값)italic) 이텔릭체글자의 두께(가중치)nomal, 400) 기본 두께(기본값)bold, 700) 두껍

2일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (6) ~ (10)

요소의 테두리를 지정하는 단축 속성border: 선-두께 선-종류 선-색상;테두리 두께가 늘어날수록 요소도 커짐border-widthborder-styleborder-coloer예시) border: 4px solid orange;none: 선 없음solid: 실선das

2일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.8 CSS 속성 (1) ~ (5)

1. 개요 CSS로 제어할 수 있는 것 박스 모델 글꼴, 문자 배경 배치 플렉스(정렬) 전환 변환 띄움 애니메이션 그리드 다단 필터

2일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.7 CSS 개요 (9) ~ (10)

그러나 모든 속성들이 상속되는 것은 아님!!=> 글자나 문자를 제어해주는 속성들만 해당실제로 상속이 되지 않는 것도 상속이 되도록 하는 것=> inherit 사용같은 요소가 여러 선언의 대상이 된 경우, 어떤 선언의 CSS 속성을 우선 적용할지 결정하는 방법점수(명시도

3일 전
·
2개의 댓글

스타벅스 웹 사이트 만들기 - ch.7 CSS 개요 (5) ~ (8)

(3) 가상 클래스 (4) 가상 요소 (5) 속성

3일 전
·
0개의 댓글

스타벅스 웹 사이트 만들기 - ch.7 CSS 개요 (1) ~ (4)

선택자 { 속성: 값; }=> 선택자: 스타일을 적용할 대상=> 속성: 스타일의 종류=> 값: 스타일의 값=> 이렇게 생김 ㅇㅋ?=> 위와 같은 내용으로 스타일을 작성 하는 방식장점)별도의 css 파일을 만들지 않아도 됨단점)css 내용이 많아지는 경우에 처리하기

3일 전
·
0개의 댓글

스타벅스 웹 사이트 만들기 - ch.6 HTML 핵심 정리 (1) ~ (4)

특별한 의미가 없는 구분을 위한 요소(divistion)레이아웃을 만들 때 많이 사용, 블록제목을 의미하는 요소(Heading)1번부터 6번까지 있음, 블록문장 및 문단 을 의미하는 요소(Paragraph), 블록이미지를 삽입하는 요소(image), 인라인소스 속성에

3일 전
·
0개의 댓글

스타벅스 웹 사이트 만들기 - ch.5 HTML 개요 (1) ~ (4)

1. HTML 개요 내용 => 요소(Element) => 시작(열린) 태그(Tag) => 요소의 내용(Contents) => 종료(닫힌) 태그(Tag) 2. 부모와 자식 관계의 이해 => 부모와 자식 관계는 상대적 => 구분하기 쉽게 내어쓰기와 들여쓰기를 활용 (같

3일 전
·
0개의 댓글

스타벅스 웹 사이트 만들기 - ch.4 웹에서 시작하기 (1) ~ (3)

=> 간단한 코드를 테스트 할 때 유용=> 파일들을 연결하거나 하지 않아도 바로 반영 및 출력 가능=> 간단하게 여러가지 전처리 도구 사용 가능=> 로그인하면 저장 가능css 설정에 들어가서 css base에 있는 reset 클릭=> 이런 기본 css 스타일을 초기화

4일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.3 무작정 시작하기 (6) ~ (9)

6. 상대 경로와 절대 경로 (1) 상대 경로 ./: 주변에서 찾음 ../: 상위 폴더에서 찾음 (2) 절대 경로 http(https): 원격 /: 최상위 경로, 루트 로컬 환경 우리가 컴퓨터에서 개발하는 것 로컬 환경에서 내부적으로 라이브 서버같은 플러그인의

4일 전
·
0개의 댓글

스타벅스 웹 사이트 만들기 - ch.3 무작정 시작하기 (1) ~ (5)

문서(페이지)의 html 버전을 지정마크업 언어에서 문서 형식을 지정하며 웹 브라우저가 어떤 html 버전의 해석 방식으로 페이지를 이해하면 되는지를 알려주는 용도html1html2html3html4XHTMLhtml5: 현재 표준문서의 전체 범위html 문서가 어디에서

4일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.1 개요 (5) ~ (7)

픽셀이 모여 만들어진 정보의 집합레스터 이미라고도 부름(장점) 정교하고 다양한 색상을 자유롭게 표현 가능(단점) 확대/축소 시 계단 현상, 품질 저하 JPG(JPEG)압출력이 훌륭해 사진이나 예술 분야에서 많이 사용손실 압축(이미지가 압축될 때 이미지가 손실되면서 압축

4일 전
·
0개의 댓글
post-thumbnail

스타벅스 웹 사이트 만들기 - ch.1 개요 (1) ~ (4)

HTML, CSS, JS를 사용해 데이터를 그래픽 사용자 인터페이스(GUI)로 변환하고, 그것으로 사용자와 상호작용 할 수 있도록 하는 것보안을 요구하는 데이터들이나 기타 비지니스 로직같은 사이트가 동작하기 위해서 핵심적인 여러가지 정보들을 개발웹 사이트가 동작하는데

4일 전
·
0개의 댓글

스타트업트랙 프론트엔드 개발과정 3 - (6)

페이지를 구획으로 나누는 다양한 방법index.htmlstyle.css=> 당장은 바뀌는 부분은 없지만 그러나 안 쪽에 내용을 어떻게 표시할 지 속성으로 넣을 수 있게 됨(1) 절대값으로=> 페이지 너비에 따라서 빈 공간이 생길 수 있음 추천 안 함(2) 비율 분할(f

5일 전
·
0개의 댓글

터미널로 깃 관리 및 협업하기

팀장이 하는 일 I 협업 시작 1) 레포 만들기(퍼블릭) 2) 터미널에서 클론 3) 파일 열기 4) 깃 플로우 5) 브랜치 확인해서 디벨롭으로 갔는지 확인 6) 기본 파일, 깃 이그노어 파일 만들기(gitignore.io 사이트) > git clone htt

6일 전
·
0개의 댓글
post-thumbnail

스타트업트랙 프론트엔드 개발과정 3 - (5)

문서를 요소의 일반적인 흐름에 따라 배치index.htmlstyle.cssstatic과 같으나 top, bottom, left, right속성을 지정 가능(absolute를 포함하는 부모 요소로 주로 사용됨)족보상 가장 가까운, static인 아닌 조상 기준 상대적 위

2021년 11월 26일
·
0개의 댓글