Frontend/HTML5, CSS

반응형
Frontend/HTML5, CSS

[kh정보교육원 55일차] CSS - background / position / flexbox / transform / transition / animation / layout

Background(배경) background-image: url(절대,상대경로) background-repeat: repeat | repeat-x | repeat-y 반복여부 background-position: 배경이미지 시작위치 background-size n% | contain | cover size작성시, position 을 꼭 작성해야한다! contain: x/y축 어느 한 쪽이 꽉찰때까지만 확대/축소. 빈공간이 생길 수 있다. cover: 영역을 모두 채울때까지 확대/축소. 이미지 짤릴 수 있다. background-clip: border-box|padding-box|content-box: 배경이미지,컬러 영역 다음과 같은 스크롤시 사진은 고정되어있고 보이는 부분이 바뀌는 배경을 만들어본다...

Frontend/HTML5, CSS

[kh정보교육원 54일차]CSS - 글꼴, Text

글꼴 generic family font : serif , sans-serif , cursive, monospaced font-size : px, %, em font-weight : 100~900, bold, bolder, lighter font-style : italic, initial, nomal, oblique ... https://www.w3schools.com/cssref/pr_font_font.asp CSS font property W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, Ja..

Frontend/HTML5, CSS

[kh정보교육원 53일차]CSS - 선택자, 선택자 우선순위(직계자손과 형제요소, 후손), 가상클래스 선택자 (2)

h2 안녕 li Hello li 니하오 h2 잘가 li byebye li 짜이찌엔 위 코드에서 직계자식과 후손에 대해 배워보자. 직계자식 & 후손 직계자식인 parent만 h2에 대해서 노란색 배경이 설정되었다. 부모의 경우 '>' 를 사용하고, 후손의 경우 ' ' (띄어쓰기)를 사용한다. 후손에 대해 underline을 지정해주었는데, 부모 및 자식에 대해 전부 설정되었다. 부모 아래에 있는 ul, li에 대해서 색을 빨간색으로 지정해주었더니 parent아래만 빨간색으로 지정되었다. 자식에 대해서 ul, li에 대해 색을 파란색으로 지정해주었더니 child아래만 파란색으로 지정되었다. html css javascript jquery geolocation webstorage 위 코드에 대해서 형제요소에 ..

Frontend/HTML5, CSS

[kh정보교육원 53일차]CSS - 선택자, 선택자 우선순위 (1)

CSS : Cascade Style Sheet html이 데이터를 다룬다면, css는 style에 대해 다룬다. 문서내용 작성하는 부분과 꾸미는 부분을 분리하여 내용을 수정하여도, 디자인을 바꿀 필요가 없고 디자인을 수정해도 글 내용을 바꿀 필요가 없다. 다양한 기기에도 디자인만 따로 적용하여 구동 시킬 수 있다. style : 정해진 속성을 입력하여 웹페이지를 꾸미는 것 stylesheet 웹페이지에서 반복적으로 쓰는 style을 모아놓은 것 스타일 기본 형식 css를 html에 적용하는 방법 1. html요소의 inline style속성 작성 2. html문서의 내부 style태그 작성 3. 외부 css파일을 현재 html문서와 연결 1. html요소의 inline style 속성 작성하기 CSS c..

Frontend/HTML5, CSS

[kh정보교육원 52일차] HTML - 이미지, 링크, 멀티미디어, 폼 관련 태그

이미지 관련 태그 이미지는 img로 작성하며, 시작과 종료 태그의 구분 없이 하나의 태그만 작성한다. src = 이미지 경로 (절대경로/상대경로) 절대경로 : 절대주소는 / 또는 프로토콜로 시작한다. 파일 프로토콜 절대 주소는 서버환경에서 보안상 사용할 수 없다. 상대주소 : / 또는 프로토콜로 시작하지 않는 주소이다. ./ 는 현재 디렉토리 ../ 는 부모 디렉토리 alt = 대체텍스트 이미지를 찾지 못했거나, 시각적 확인이 불가능한 경우 사용할 텍스트. 절대 크기 px : 픽셀로 크기를 나타냄. 창을 키우거나 줄여도 변화 X 상대 크기 % : 전체 가로 길이에서 %로 크기를 나타냄. 창을 키우거나 줄이면 크기변화 O https://www.biew.co.kr/entry/WAI-ARIA-%EC%9B%B9..

Frontend/HTML5, CSS

[kh정보교육원 51일차] VSCode 기초 설정 / HTML 기초 - 문자 , 목록 , 표

비주얼코드 설치 https://code.visualstudio.com/download Extension 에서 추가해야할 것들 Live Server -> Extension Settings local 검색해서 Use local IP as host 선택. 모두 설치해주자. 이제 HTML에 대해 알아보자! HTML Hyper Text Markup Language 웹에서 정보를 표현할 목적으로 만든 마크업 언어. Hyper Text : 다른 페이지로 이동 가능한 링크가 포함된 텍스트 Markup Language : 태그를 통한 정보의 계층구조를 표현하는 언어 웹페이지를 작성하기 위해 사용되는 언어로 웹 브라우저에게 보일 문자열과 이를 감싸는 해석기호(태그들)로 이루어져 있다. ㄴ마크업 (태그) : 문서의 논리적인..

반응형
유경(shin-6-0)
'Frontend/HTML5, CSS' 카테고리의 글 목록