CSS기초

animation 움직임(모션효과)을 만드는 속성. 해당 속성을 적용하면 html페이지가 로드되었을때 시작한다. [종류] animation : animation의 하위 속성들을 한꺼번에 선언할때 사용함. animation-delay : 이벤트 발생 또는 페이지

transition : 변환속성움직임을 만들어내는 속성. 어떤 요소의 움직임을 부드럽게 처리하는 역할을 한다. 움직임을 구현할 때 애니메이션 속성과 변환 속성으로 나눠지는데변환 속성을 이용하면 더 간단하게 모션 효과를 구현할 수 있다.변환 속성은 적용한다고 해서 바로

transform변형속성 브라우저 화면의 x,y,z축을 이용해 태그의 모양을 바꿔주는 속성.x축과 y축을 사용하는 변형속성을 2차원 화면 좌표라고 부르고 여기에 z축이 추가되면 3차원 화면 좌표라고 부른다. z축은 브라우저를 보는 유저에게 가까울수록 양수값이다.2차원

1.textarea:폼에서 텍스트를 여러 줄 입력해야 할 경우 텍스트 영역을 지정하는 태그.속성\-cols : 텍스트 영역의 가로 너비를 문자 단위로 지정함. \-rows : 텍스트 영역의 세로 높이를 줄 단위로 지정함. 만약 지정한 숫자보다 줄 개수가 많아지면 스크

input 태그의 주요 속성1.autofocus:페이지를 불러오자마자 폼에서 원하는 요소에 마우스 포인터를 표시할 수 있다.입력 요소 중 텍스트를 입력할 수 있는 양식에 autofocus를 사용하면 입력 커서가 깜빡이면서텍스트를 바로 입력할 수 있게 해준다.2.req

label태그폰 요소에 이름을 붙이는 태그. 사용자가 어떤 내용을 입력할지 쉽게 알아볼 수 있도록 해주는 역할을 함. 또한 폼 요소와 해당 이름을 연결해주고 나중에 자바스크립트를 통해 해당 폼 요소를 제어할 수 있도록 도와준다.input태그input태그는 사용자가 정보

표에 사용하는 다양한 css속성1.border-collapse:table태그와 td 또는 th사이에 있는 두 줄을 한 줄로 합쳐주는 속성.해당 속성은 table태그에 직접 적용해야 함.\-collapse : 떨어져 있는 두 줄을 한줄로 합쳐줌.\-separate : 기

큰틀을 정할때 사용하는 태그 semantic tagsemantic tag(시멘틱 태그)웹 표준 태그로 구조를 쉽게 파악하고 큰 영역들을 잡는 구조 태그.검색 엔진 같은 프로그램에서 자료를 검색해 정보의 의미를 분석할 수 있게 도와주는지능형 웹 태그. 또한 시각장애

\`\` gradient배경 색상이나 글자에 그라데이션을 넣을 수 있다.배경에 적용할 경우 background-image속성을 이용하며글자에 적용할 경우 color에 적용한다.1.linear-gradient(각도 to 방향, 색상중단점1 시작위치% , 색상중단점2 시작

입력양식태그사용자로부터 정보를 얻고자 할때 사용하는 태그.form태그를 사용하며 안에 여러 입력양식 태그를 사용해서 서버로 해당 정보를 보낼 수 있다.form태그사용자에게 입력받은 정보를 어떤 방식으로 서버에 넘길지 서버에서 어떤 프로그램을 이용해 이 정보들을

컨텐츠 이미지사이트 :게티이미지뱅크, 아이클릭아트 참고

position : 위치속성position위치를 설정할 때 사용하는 속성.위치 속성에는 절대 좌표와 상대 좌표라는 개념이 있다.절대 좌표는 0점을 기준으로 움직이는 좌표를 말하며상대 좌표는 태그가 출력된 위치를 기준으로 움직인다. 속성값\-static :태그가 출력된

배경속성웹 문서를 꾸미기 위해 배경이미지나 여러 속성들을 적용할 수 있다. background-color:배경에 색상을 지정함. 색상명이나 background-image:배경 이미지를 넣을 수 있음. url()속성값을 사용하며 ()사이에 이미지 경로

형태구조선택자

후손선택자(=자식선택자) 부모안의 자식들을 선택하는 선택자. 부모안의 자식들을 선택할 때 공백으로 표기함. [기본형] 부모태그 자식태그{속성 : 값;}

ul의 불릿이나 ol의 숫자를 다양한 형태로 바꿀 때 사용한다. \*스타일상속:부모의 속성은 자식에게 그대로 전달된다.

* overflow* 박스안에 컨텐츠가 많아 범위를 넘어갈때 넘치는 부분을 어떻게 보여줄지 정하는 속성. overflow : hidden★ height속성이 지정되어 있을 경우 영역을 벗어나는 부분을 숨김. height속성이 지정되어 있지 않을 경우 컨텐츠에 맞춰

부모박스에 display:flex 속성이 적용되어 있을 때 자식 박스에 적용하는 속성들 order 순서 변경 속성 order를 통해 flex안쪽의 자식 요소의 순서를 바꿀 수 있다. 기본값은 0이며, 양수나 음수로 바꿀 수 있다. 작은 수일수록 나열 순서가 앞으로

align-content: 컨텐츠 정렬 속성 ============================================= 플렉스된 컨테이너 안에 자식들이 매우 많을 경우 여러 줄이 형성된다. 이 때 한 줄을 하나의 content로

flex-wrap : 자식을 감싸는 속성 flex를 적용하게 되면 자식 요소들이 부모 넓이보다 넓을 때 자동으로 찌그러든다. 이때 만약 자식의 넓이와 높이를 그대로 유지하고 싶다면 flex-wrap을 사용한다. -flex-wrap : nowrap; :기본값으로 모

align-items 부모박스안에서 세로로 자식박스를 정렬하는 속성 align-items를 사용하면 부모박스 안에서 자식 박스를 세로로 정렬할 수 있다. 이때 '세로'는 부모박스의 top에 위치하느냐,middle에 위치하느냐,bottom부분에 위치하는가를 뜻한다.

★★★★★display:flex★★★★★ 부모박스(컨테이너)안의 자식박스(item)를 정렬하는 속성. flex를 적용하는 순간부터 자식박스는 가로로 정렬됨. 이때 자식박스의 가로 넓이 총 합이 부모박스의 넓이를 넘게 되면 자식박스의 사이즈가 자동으로 줄어들며 부모를

display속성이란? 박스를 배치를 하거나 고유의 속성을 바꿈. display는 '보여주다'라는 의미로 블록 요소와 인라인 요소의 특징을 바꿀때 사용함. *보통 img들은 block으로 바꿔준 후에 다른 속성값을 적용한다. -display : block; 해당

중첩박스란?박스에도 부모자식 관계가 있다.감싸고 있는 박스를 부모박스라고 부르고, 안에 들어있는 박스를 자식 박스라고 부른다.중첩 박스는 곧 부모자식 관계를 가진 박스를 의미하고, 박스를 정렬하는 방법이 중요하다.중첩박스로 레이아웃 만들기 \-'container'라는

박스를 가로로 배치하는 float속성 float속성은ㄴ 사전적인 의미로 '떠오르다', '떠다니다'라는 의미를 가지고 있다. 웹 페이지에서는 float을 이용해 박스를 왼쪽이나 오른쪽으로 배치할때 사용한다. 만약 배치 하지 않을 경우 float:none;속성이나 cle

css와 박스모델css 박스 모델이란 웹 문서의 내용을 박스 형태로 정의하는 방법블록 요소와 인라인 요소블록레벨요소란태그를 사용해 요소를 삽입했을 때 혼자 한 줄을 차지하는 것을 가리킨다. 대표적으로 h1,div,p 등이 있다.인라인레벨요소란콘텐츠만큼만 영역을 차지하고

컨텐츠 영역에 border까지를 포함시키는 box-sizing속성 css box model을 계산할때 보통 width + (padding2) + (border2) + (margin*2) 이런 공식으로 계산을 하지만, box-sizing속성을 이용하면 padding영역

웹문서의 뼈대를 만드는 HTML HTML은 웹문서를 만드는 기본 언어입니다. HTML은 웹 브라우저의 여러 내용 중에서 제목과 본문,이미지, 표와 같은 웹 요소를 알려주는 역할을 하며, 웹 개발을 하면서 웹 브라우저에 보여주고 싶은 내용이 있다면 HTML에 맞는