미디어쿼리 (@media) : 단말기의 유형 , 특성이나 수치에 따라 웹사이트나 앱의 스타일을 수정할 수 있다. 반응형 웹을 만들 때 사용됨. 연산자 속성 and 여러 특징을 하나로 결합함 , (=or) 각각의 개별 미디어쿼리에 속성 부여 not 전체 미디어쿼리를 부정하기위해 사용됨 only 미디어쿼리를 지원하지 않는 브라우저가 주어진 스타일을 적용하는것을 방지 미디어쿼리의 사용 예시 - @media (min-width:900px) {background-color : yellow;} : 최소넓이가 900px 이하일 때 background-color : yellow 를 적용하겠다. and 연산자 @media (min-width:700px) and (max-width:900px){ ul { width:50%..
float
* float 이란 - 웹페이지에서 이미지를 어떻게 띄워서 텍스트와 함께 배치할것인가에 대한 속성. - 속성 간단 정리 종류 left right none 너비 최대한 줄어든다 최대한 줄어든다 유지된다 본질 최대한 위로 올라간 후 좌측으로 붙는다 최대한 위로 올라간 후 우측으로 붙는다 - block 무시된다 무시된다 무시되지 않는다 inline , inline-block 무시되지 않는다 무시되지 않는다 무시되지 않는다 - float의 기본값은 none 이며 최대한 공백없이 너비를 줄여 위로 올라갈 수 있는만큼 올려준다. display : inline-block 과 유사하다고 볼수도 있지만 태그를 정렬하였을 때 공백이 있고(inline-block) , 없고(float)의 차이가 존재. 1) display :..
*Form요소란 - 서버에 데이터를 전송하기위해 필요한 요소 (block레벨 요소임) ▶ form : form요소들을 감싸는 태그. form요소의 범위를 나타내준다. ㄴ action 속성 : 데이터를 처리하기 위한 서버의 주소 ㄴ method 속성 : 데이터를 전송하는 방식 - GET 방식 : 주소에 데이터를 추가하여 전송하는 방식. post방식과 다르게 전송가능한 데이터의 크기가 제한적이다. - POST 방식 : 데이터를 따로 첨부하여 전송하는 방식. 데이터가 외부에 드러나지 않아 보안성이 놓다. ▶ : 대표적인 form요소. text : 단순한 텍스트요소를 입력할 때 사용 placeholder : text의 속성. 내용요소를 넣어줄 수 있음. password : 비밀번호 입력. 화면에 입력한 문자나 ..
*white-space 란 - 공백과 줄바꿈을 어떻게 처리할지 정해주는 속성. 속성값 기능 normal 기본값. 연속된 공백의 하나의 공백으로 처리됨. 글이 길어지면 자동으로 줄바꿈처리된다. nowrap 공백처리는 normal과 동일하지만 글이 길어져도 줄바꿈을 하지않는다. pre 연속된 공백을 그대로 표시해줌. 글이 길어져도 줄바꿈을 하지않는다. pre-wrap 연속된 공백을 그대로 표시해주며 줄바꿈 자동실행됨. pre-line 공백처리는 normal과 동일. 줄바꿈이 없어도 자동실행되며 줄바꿈이 있을 시에는 그대로 표시됨. white-space : nowrap 예시 See the Pen vYNJqoG by Han-daeun (@eun_h) on CodePen. white-space : pre 예시 S..
*Transition 이란 : css 애니메이션의 속도를 조절해주는 선택자. transition : 모든 속성 한번에 적용 transition-delay : 몇 초 후에 재생할지 지정 transition-duration : 몇 초 동안 재생할지 지정 transition-property : 어떤 속성을 변형할지 지정 transition-timing-function : 수치 변형 함수 지정 수업시간에는 transition 한가지 활용중. ex) transition:width 2s 10s , opacity 2s (전자가 딜레이) 1) transition width값 예시 See the Pen MWaogQv by Han-daeun (@eun_h) on CodePen. 2) opacity값 예시 See the P..
태그 의미 제목태그. ~ 으로 나뉘며 숫자가 커질수록 작아짐 block 요소를 가지고있는 태그 inline-block 요소를 가지고있는 태그 문서를 연결하는 네비게이션 영역 주제별 콘텐츠 영역 콘텐츠의 내용이 들어가는 영역 순서가 없는 목록태그 순서가 있는 목록태그 ul과 ol 태그의 하위요소. 목록의 아이템을 만들어줌 줄바꿈 & 단락변경태그 줄바꿈태그   공백태그 ( html에서는 스페이스바로 인한 공백이 한칸이상 통하지않음 ) 표를 만들기 위한 태그. - : 행 (가로) - : 열 (세로) - : 표의 제목 - : 표의 본문 - : 제목 셀
* HTML이란 - HyperText Markup Language 의 줄임말로 웹문서를 만들기 위해 사용하는 기본적인 웹 언어 중 한 종류이다. 마크업언어 라도고 함. - HTML의 기본구조 See the Pen GRpWzMJ by Han-daeun (@eun_h) on CodePen. html : 문서의 시작과 종료를 선언하는 태그. head : 문서의 기본설정적인 내용이 들어가는 부분. title : 페이지의 제목을 지정하는 태그. body : 실제 홈페이지에 표시될 내용을 입력하는 부분. - html은 기본적으로 head 와 body "tag"로 구성되어있다. - tag란 : html이 사용하는 명령어. 꺾쇠기호로 둘러쌓인 문자이며 시작태그와 끝태그로 나뉨. ex)