목록분류 전체보기 (308)

다연이네

[days02] 메뉴바 만들기 test

해당 사진을 보고 똑같이 만드시오 1. Home News Contact About Top Navigation Example Lorem ipsum dolor sit amet. 2. transition: all 0.3s ease /* 어떤 상태가 바뀌더라도 0.3초 효과를 유지해라 */ => 마우스를 옮기면 색깔이 스르르 바뀐다.
Web/CSS 2020. 12. 4. 13:12
[days01] 구글 글씨체 사용하기, 외부 아이콘 사용하기

1. 구글 글씨체 사용하기 Sofia Font Lorem ipsum dolor sit amet. 1234567890 2. 외부 아이콘 사용하기 1) fontawesome 2) 부트스트랩 3) 구글 Google cloud favorite attachment computer traffic Bootstrap Awesome icons + size + color Lorem ipsum dolor sit amet. Illum labore quaerat aperiam esse? 위 아이콘을 이용해 메뉴바처럼 만들어보기
Web/CSS 2020. 12. 3. 21:07
[days01] CSS 텍스트: 색상, 정렬, 장식, 변환 등 + 글씨체

글씨체 지정 font-family: Arial, Verdana, "Times New Roman"; => 글씨체 지정 /*""가 붙는 이유: 글꼴이름이 중간에 공백 있으면 ""로 묶어야함 */ font-style: oblique; /* italic과 똑같이 기울어짐 */ 1. 텍스트 방향 direction: rtl; unicode-bidi: bidi-override; (2가지 속성 필요) 2. 텍스트 양쪽 정렬 text-align: justify; 3. 이미지 위치 (글자 속에서 _ㅁ_ 인지 -ㅁ- 인지 등) vertical-align: middle; CSS 텍스트 : 색상, 정렬 Lorem ipsum dolor sit amet, consectetur adipisicing elit. A rem. Lorem..
Web/CSS 2020. 12. 3. 20:45
[days01] max-width(height)와 오버플로우(스크롤바 외)

1. max-width 요소의 높이/너비 2. overflow: auto; Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat voluptatem beatae deleniti rerum aliquid officiis magnam vitae praesentium optio quis perspiciatis soluta voluptatibus explicabo! Illum laudantium ullam perferendis incidunt qui! Voluptates voluptas accusamus laudantium ea porro quae incidunt quos nesciunt consectetur doloremque quam labo..
Web/CSS 2020. 12. 3. 20:22
[days01] 여백(margine)과 패딩(padding) + outline

(1) 여백(margine) 1. 테두리(border) 외부의 요소 주위 공간을 만든 것 : 여백 2. margin-top/margin-right/margin-bottom/margin-left 3. 위를 줄여 margin으로 사용 가능 4. margin 값 - auto, px, pt.cm 등등, %, inherit(상속), 음수값을 사용할 수 있다. h3과 div가 위 아래로 있는 경우, h3에서 bottom 마진을 50 주고 div가 top 마진을 100 준다면, 도합 마진이 150이 떨어질까 ? 아니. 그냥 100px만 떨어진다. h3{ margin-bottom: 50px; } div{ margin-top: 100px; } **요소의 상단(Top) 여백과 요소의 하단(Bottom) 여백이 충돌날때는 ..
Web/CSS 2020. 12. 3. 19:36
[days01] 테두리 속성 (border-style, border-radius)

1. border-style (선의 모양) css 테두리 속성 p[class=]*10>lorem5 Lorem ipsum dolor sit amet. Alias architecto earum dolore itaque. Impedit porro minus quisquam sed? Odio nihil dignissimos architecto accusamus? Incidunt autem quia asperiores quisquam. Temporibus tempora rem excepturi accusantium. Quod reiciendis ratione fugiat dignissimos. Explicabo consequatur quis repellendus quaerat. Officiis reprehende..
Web/CSS 2020. 12. 3. 18:11
[days01] CSS 투명도, 박스 위치 지정과 클릭시 맨 위로 이동하는 법, background

1. opacity: 투명도 설정 Hello World:) Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo consequuntur. Lorem ipsum dolor sit. Lorem ipsum dolor sit. Lorem ipsum dolor sit. 투명도:1(기본값) Lorem ipsum dolor. 투명도 설정 방법에는 두가지가 존재한다. 1. 2. 인라인 형식으로 backgroud-color:rgba( , , , 투명도 )을 통해 설정할 수 있다. 안녕 2. 우측 맨 아래에 박스를 두고 (스크롤에 상관 없이 계속 존재) 그 박스를 클릭하면 맨 위로 이동하도록 한다. 지금 우측 맨 아래 top 박스에 마우스를 올려놓은 상태이다. 원래..
Web/CSS 2020. 12. 3. 13:43
[days01] CSS (구문 및 적용 방법)

1. CSS ㄱ. [C]ascading [S]tyle [S]heets ㄴ. html 요소가 화면, 종이, 기타 미디어에 표시되는 방법을 설명(정의) ㄷ. 여러 웹 페이지의 스타일을 일괄적으로 관리할 수 있다. (많은 시간 절약, 유지) ㄹ. 외부 스타일 시트 (???.css) 2. CSS 구문(형식) 스타일을 적용할 대상 선택자(Selector) { 속성(Property):속성값(Value); 속성(Property):속성값(Value) } 선택자로 올 수 있는 것들 1) 태그명 2) #아이디명 (숫자로 시작할 수 없다) 3) .클래스명 4) * 범용선택자 : 모든 html요소를 선택자로 사용 5) , 그룹화 선택자: 동일한 스타일 정의할때 html 요소 선택 p, div, span {동일한 스타일 설정}..
Web/CSS 2020. 12. 3. 13:16
Prev 1 ··· 19 20 21 22 23 24 25 ··· 39 Next