본문 바로가기

HTML

(12)

[프론트엔드 입문] 스벅 랜딩페이지 PJT . Section(복습필요)_ Day+19~ 보호되어 있는 글입니다.

[프론트엔드 입문] 스벅 랜딩페이지 PJT . Badge 보호되어 있는 글입니다.

[프론트엔드 입문] 스벅 랜딩페이지 PJT . header _ Day+13~16 보호되어 있는 글입니다.

[프론트엔드 입문] 자바스크립트 JS Prev. _ Day+11 개요 1) 표기법 dash-case(kebab-case) snake_case camelCase ParvelCase dash-case(kebab-case) html css 에서 사용 the-quick-brown-fox-jumps-over-the-lazy-dog 컴퓨터는 이 문장을 그냥 하나의 단어로 읽지만, 이걸 보는 사람은 문장 띄어쓰기를 이해할 수 있음\ snake_case) html css 에서 사용 the_quick_brown_fox_jumps_over_the_lazy_dog camelCase JS (대부분 자바스크립트에서의 표기법) theQuickBrownFoxJumpsOverTheLazyDog PascalCase JS (new 생성자 사용 시 등의 특이상황에 사용) TheQuickBrownFox..

[프론트엔드 입문] CSS Properties 속성(3) - transition__Day+9 전환 transition: 속성명 지속시간 타이밍함수 대기시간; (단축형으로 작성 시, '지속시간' 속성은 필수 포함) (요소의 전환(시작과 끝) 효과를 지정하는 단축 속성) 1. transition-property (전환 효과를 사용할 속성이름을 지정) all : 모든 속성에 적용 속성이름 : 전환 효과를 사용할 속성 이름 명시 (e.g. 가로너비만 전환 효과 적용 희망 시→ width 명시) 2. transition-duration (전환 효과의 지속시간을 지정) 0s : 모든 속성에 적용 시간 : 지속시간(s)을 지정 3. transition-timing-function (전환 효과의 타이밍 함수(Easing function)를 지정) ease : 느리게-빠르게-느리게 = cubic-bezier(0..

[프론트엔드 입문] CSS Properties 속성(2) - position / flex 배치 1. position (요소의 위치 지정 기준, 모두 음수 사용 가능) → top, bottom, left, right, z-index static : 기준 없음 absolute : 위치 상 부모 요소를 기준 (부모요소 위치 꼭 확인! 위치상 부모요소여서, 부모요소에 위치가 꼭 들어있어야함. 없을 경우 뷰포트를 기준으로 적용됨. 부모요소에 position: relative; 입력. 위치상 부모요소보다 더 상위 부모요소에 기준 맞추고 싶으면, 직전 부모요소는 position: static;, 그 상위 부모요소에 position: relative; 적용해야 함. 적용할 수 없는 대상이 없게 되면 relative부모요소 > html body > html 뷰포트 로 기준 이동. 다른 아이템과 상호관계 신경..

[프론트엔드 입문] CSS Properties HTML 속성 : Attributes CSS 속성 : Properties JS 속성 : Properties 박스 모델 Font(size, weight), 문자 배경 (색상, 이미지) 배치 (위치) 플렉스 (위에서부터 아래로 쌓이는 레이아웃 외 여러 요소를 수평정렬할 때 사용하는 개념, 수평정렬만을 위한 띄움의 최신 기능) 전환 (이전상태에서 나중 상태로 자연스러운 애니메이션 처리하는 기능) 변환 (회전, 이동, 크기 조정 등 요소의 변화를 주는데, 2D변환과 3D 변환이 있음) 띄움 (CSS 이전에는 수평정렬에 플렉스 전에 띄움 사용, 요소를 공중에 띄우는 효과. 요소 주변에 여백 만들어주는, 사진 주변에 글자들이 떨어져서 자연스럽게 흐르는 구조를 만드는 기능) 애니메이션 (전환효과는 ①전 ②후 만 있다..

[프론트엔드 입문] 인라인/블록/테이블 태그 [인라인(글자) 요소] : heading. h1~h6까지 있음 제목을 의미하는 요소, 컨텐츠의 제목, 목차 타이틀 의미 숫자가 작을 수록 더 중요한 제목을 정의 : paragraph, 문장을 의미하는 요소 내용이 문장이라고 보기 애매한 걸 작성할 땐 div 사용할 수도. 개발코드 공유 시에 이건 같이 구성되는 '문장'임을 전달하기엔 편할 것 : 이미지를 삽입하는 요소지만, 인라인 요소임. (예외 有) 웹표준(필수속성) 지켜야 화면이 출력됨, 그래서 삽입할 이미지 경로 src뿐만 아니라 alt 꼭 입력해야함 (엑박떴다= alt 속성의 이름이 뜬 것) Naver Google : anchor(닻, 링크를 걸었다, 고정했다) 다른/같은 페이지로 이동하는 하이퍼링크를 지정하는 요소 href 속성은 경로 의미, t..

이전 1 2 다음

티스토리툴바