FrontEnd/HTML&CSS

# Transitions - transition : 어떤 상태에서 다른 상태로의 변화를 보여주는 애니메이션 - 규칙 1 : transtion은 state가 없는 요소에 붙어야하며, 처음 생긴곳(root) 에 있어야한다. state에 transition을 준다면 변화를 주는 것을 그만할 경우, 원래 상태로 바로 돌아간다. - 규칙 2 : transtion 에 변화를 준것들은 state에 들어있는것들이 기준이 되어 바뀌는것. 바뀌는 것들에 한정하여 transition 이 일어날 수 있다 HTML 삽입 미리보기할 수 없는 소스 # Transitions part Two - transition은 상태(hover, active, focus, focus-within)에 따라 바뀐 요소가 있을 때 사용한다. - eas..

CSS를 HTML에 추가하는 방법 1. HTML의 head안에 CSS코드를 작성해준다. (style)태그 안에 작성 후 닫아주기 2. CSS파일(_.css)을 별도로 생성후, HTML파일에 두 파일을 연결해준다. (link)태그로 두 파일간 관계를 정의해주기. (link href="~.css" rel="stylesheet") 2번 방법이 더 좋다. 코드가 보기 간결하고, 동일한 형식의 CSS를 연결하기가 편하기 때문 ### CSS 작성 규칙 1. selector을 작성한다. CSS가 하는 일은 HTML 태그를 가리키는 것이다. (이건 어떤 색이다...등) 이렇게 연결하는걸 selector이라고 한다. 2. 어떤 태그를 가리켰으면 원하는 속성을 쓴다. ex)blueTitle의 글씨체는 뭐고...글씨 크기는..

1. html : 뼈대 - hyper markup language - content 구조가 어떤지를 설명해준다. - 웹사이트의 틀을 짜주는 역할 : title, header, sidebar 2. css : 근육 - cascade style sheets - html과 함께 사용한다 - 브라우저에게 어떻게 보여야하는지에 대해 알려준다 (디자인 관점에서) - 디자인을 이용해 스타일을 만드는 역할을 한다. - html만 사용하려면 사용할 수 있으나, css는 단독으로 사용할 수 없다. 3. javascript : 프로그래밍 동적 언어 - 클릭하면 어떤 동작을 수행하게 하는 역할 - 웹사이트의 상호작용을 가능하게 하는 언어이다. (목록 ,스크롤바, 메뉴 애니메이션) HTML 1. 파일과 폴더명은 모두 소문자로 작..

hyper text markup language → 프로그래밍 언어가 아님 hyper text : 참조(링크)를 통해 한 문서에서 다른 문서로 즉시 접근할 수 있는 텍스트 markup : 태그 등을 이용하여 문서나 데이터의 구조를 명기하는 언어 첫 번째 웹페이지 : world wide web HTML 웹페이지를 작성하기 위한 언어 .html의 확장자를 가진다 태그는 대소문자 구분이 없다 엔터, 스페이스바, 탭이 적용되지 않는다 태그 html의 요소는 태그와 내용으로 구성된다 ~속성값~ 시작태그 / 종료태그로 쌍을 이루거나 시작 태그만 존재할 수도 있음 각각의 시작태그는 속성과 속성값을 가질 수 있다. 주석 주석의 내용은 브라우저에 출력이 되지 않는다 html 태그의 내용을 설명하기 위한 용도로 사용한다 ..

CSS Selector css에서 선택을 잘 하는것이 중요하다 html 문서에서 css 규칙을 적용할 요소를 정의 기본선택자 전체선택자 : *을 사용하자 html 문서 내 모든 요소를 선택 {style properties} 타입선택자 : 태그명을 이용하여 스타일을 적용할 태그를 선택 HTML 내에서 주어진 유형의 모든 요소를 선택 element{style properties} 클래스선택자 : class 가 적용된 모든 태그를 선택 html 내에서 동일한 클래스 명을 중복해서 사용할 수 있다 사용법 → .class-name{style properties} 대소문자 구별 id선택자 id특성값을 비교하여, 동일한 id를 가진 태그를 선택 HTML 내에서 주어진 id를 가진 요소가 하나만 존재해야 한다 #id-..

float - 글들을 감싸면서 이미지를 배치할 수 있다. - 속성 : left, center, right Flexbox - Flex container : container에 적용할 수 있는 값 display flex-direction flex-wrap flex-flow justify-content align-items align-content -Flex item: item에 적용할 수 있는 값 order flex-grow flex-shrink flex align-self - Flexbox 에는 main axis(아이템이 정렬되는 방향)와 cross axis(중심축과 반대되는 방) 두개의 축이 있다. 속성 정리 display: flex; block 성격의 container display: inline-fl..