목록Web (124)

다연이네

[days03] 1) 오버플로우(overflow) 2) float / clear

1) overflow 속성 너무 커서 영역에 맞지 않는 내용을 제어하는 속성 visible: (기본값) hidden: 오버플로가 잘리고 나머지 내용은 보이지 않는다. scroll: 오버플로가 잘리고 스크롤바 생성 auto: scroll 속성과 유사하지만 필요한 경우에만 스크롤바 추가 주의: height 속성을 지정한 블럭모드 요소에 대해서만 overflow가 작동한다. css overflow 속성: 너무 커서 영역에 맞지 않는 내용을 제어하는 속성 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus nemo quo voluptate voluptatibus accusantium officiis saepe repellat labore n..
Web/CSS 2020. 12. 7. 13:46
[days02] 웹페이지 스킨 선택 (샘플)

강사님이 주신 샘플! Welcome to My Homepage Use the menu to select different Stylesheets Stylesheet 1 Stylesheet 2 Stylesheet 3 Stylesheet 4 No Stylesheet Same Page Different Stylesheets This is a demonstration of how different stylesheets can change the layout of your HTML page. You can change the layout of this page by selecting different stylesheets in the menu, or by selecting one of the following li..
Web/CSS 2020. 12. 4. 22:20
[days02] 메뉴바 디자인하기, 웹페이지 틀 디자인하기

1. 메뉴바 디자인 메뉴에 마우스를 올리면 스르륵 나타난다. Home Servi Clients Contact Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam beatae! 2. 웹페이지 틀 디자인하기 My Website Lorem ipsum dolor sit amet. Link Link Link Link About Me Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis molestiae. Popular Post Image Image Image Follow Me Some Test... TITLE HEADING TITL..
Web/CSS 2020. 12. 4. 22:15
[days02] 1) sticky와 2) fixed으로 sticky 효과 내기

1) sticky 사용해보기 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni odio impedit repellat tempora voluptate corrupti architecto consequatur tenetur itaque eum. hello world Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis ratione eaque at excepturi magni unde assumenda pariatur tempora. Voluptatum iusto debitis vitae expedita rem optio eligendi quas ullam quos exercitat..
Web/CSS 2020. 12. 4. 19:19
[days02] 위치 속성(position)

css 위치(position) 속성 => 레이아웃 잡을때 많이 사용 잘봐두자 - static 기본값(정적 배치) - top, bottom, left, right 속성의 영향을 받지 않는다. - relative 상대좌표, [다른 요소들은 간격이 조정되지 않는다.] - fixed 고정(뷰포트를 기준으로 배치된다. 스크롤되더라도 항상 같은 위치에 유지된다.) - absolute 절대좌표(가장 가까운 위치의 조상을 기준으로 배치된다) - sticky 사전적 의미(끈적끈적) ->사용자의 스크롤 위치에 따라 배치 box1 box2 box3 hello world admin Lorem ipsum dolor sit amet. 문제) position을 사용해서 해당 박스 위치 옮기기 빨강 박스는 왼쪽20px, 위20px으..
Web/CSS 2020. 12. 4. 19:18
[days02] display:none과 visibility: hidden

요약: display:none는 흔적조차 남지 않고 visibility: hidden은 흔적을 남긴다. 1. display:none display : none이 적용되어 있는 버튼을 누르면 box1이 사라지며 공간조차 남지 않는다. 2. visibility: hidden visibility : hidden이 적용되어 있는 버튼을 누르면 box2가 사라지며 있던 공간이 남는다. Box1 Remove Box2 Hide Box3 Reset All 위의 코딩을 JQuery를 사용해 변경해보자 Box1 Remove Box2 Hide Box3 Reset All
Web/CSS 2020. 12. 4. 18:39
[days02] 테이블 만들기

테이블 만들어 보기 table sample 컬럼명1 컬럼명2 컬럼명3 컬럼명4 5 6 7 8 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 9 10 11 12 1. 행에 마우스를 올리면 진한 회색으로 변하며, 테이블의 맨 윗부분(컬럼명 부분)은 마우스를 올려도 아무 변화가 없다. tr:hover:not(:first-child){ / background: lightgray; }
Web/CSS 2020. 12. 4. 18:15
[days02] 1. CSS 목록 속성 2. 마우스 롤오버 (+href, src, url 차이)

1. 목록 속성 ol도 기호(동그라미 등)로 표현될 수 있고 ul도 숫자를 붙혀 표현될 수 있다. 따라서 css에서는 둘의 구분이 필요가 없다. html 목록+css 목록 속성 Lorem. Quis. Excepturi. Optio. Molestias. Lorem. Natus. Vel. Debitis. Inventore! Lorem. Natus. Vel. Debitis. Inventore! list-style-position: inside; 위 속성을 통해 밖에 있던 동그라미들이 li 보드 안으로 들어간다. (기본값은 outside이기 때문에 밖에 있다.) 2. 마우스 롤오버 링크태그로 버튼 만들어 롤오버 효과 주기 롤오버효과: 마우스를 올리면 디자인(스타일)이 바뀜 마우스를 올리면(+클릭하는 동안도) 버..
Web/CSS 2020. 12. 4. 13:49
Prev 1 ··· 8 9 10 11 12 13 14 ··· 16 Next