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/Javascript

[kh정보교육원 54일차]CSS - 정렬, Box model, 경계선, Display, 목록

정렬 inline요소 부모block요소의 text-align속성을 통해서 정렬. 정렬대상 a, img, span과 h1~h6, p안의 text block요소 margin속성(다른 요소와의 거리)를 이용해서 정렬 text-align : left, center, right margin : top right bottom left margin : _ auto ; _만큼 좌우 마진 똑같이 계산해서 지정 margin-left/ margin-right : auto; 좌 우측정렬 justify-content : center; 메인 축 정렬 align-items : center; 크로스 축 정렬 안녕 링크링크 제목 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ve..

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..

반응형
유경(shin-6-0)
'css' 태그의 글 목록