css / float, background, list

코딩/html & css

css / float, background, list

민여 2022. 1. 12. 16:40

*박스라고 div를 만드는게 아니라
dl을 활용해서 요소마다 투명박스가 있으니까 색을 주면 박스넣은것처럼 보임
인라인요소가 여러가지 들어갈때 div 클래스 적용해서 값을 줄수있다

*overflow말고 쓸수있는 속성(=float 높이값 처리)

★가상선택자 after { content:''; clear:both; display:block; }

앞에 : 을 붙이고 before, after 두가지가 있음 그리고 {}
ex) h2:before {}, .contents:after {}

※ : 사이는 띄어쓰기 할수 없음 두개(::)는 사용가능

※ {}안에 필수속성

content:''; (따옴표 넣어야함 안에는 비워도됨)
-드래그를 하면 잡히지 않고 스타일로만 들어감

display:block; 이 속성은 요소의 성격을 정의하는 속성이다.
-인라인요소를 블록요소로 바꿔준다고 생각하면 됨
clear:both; 까지 이 3가지를 공식처럼 외우기

=이걸 float을 준 상위요소에 입력해야 높이값을 인식할수있음

*영문 소문자 대문자 바꾸는 속성 text-transform

uppercase(대문자)
lowercase(소문자)
capitalize(첫글자만 대문자)

*배경 관련 속성

1. background-image

{background-image: url('파일경로');}
이렇게 입력하면 이미지가 반복해서 패턴으로 보여짐
ㄴbackground-repeat: no-repeat;(반복안함)하면 이미지 본 크기만큼만 나옴
그외 값은 repeat-x(가로반복), repeat-y(세로반복), repeat(기본값)이 있음

2. background-position
x축 y축 = (기본값):0 0; = :left top;

가로축(x)은 right면 100% center면 50%로 값을 줄수있지만 세로축(y)는 height값이 있어야함 center, bottom
오른쪽으로 보낼때 양수값 100px 이렇게줘도되고 왼쪽으로보낼려면 마이너스 붙이기
=100px 200px로 입력한다면 가로로 100픽셀만큼 세로로 200픽셀만큼 당겨짐

*x시작점은 왼쪽 맨 상단 모서리부터*

3.background-attachment
기본값 scroll, fixed = fixed로하면 화면을 스크롤해서 내려도 계속 존재함 scroll하면 스크롤시 사라짐

=이걸 전부 적을 필요 없고 background:값 선언; 으로 넣고싶은 값만 넣으면 됨
값이 생략이 가능해서 무조건 선언해야되는거 아니고 필요한 값만 넣음
ex) background: url('') #fff no-repeat 100px 50px;

ㄴ 이미지와 백그라운드 태그 차이는 드래그해서 잡히는것과 이미지의 의미 여부이다 쉽게말해 내용인지 스타일인지.

*목록 관련 속성 (ol,ul에 해당)
list-style-type,list-style-position,list-style-image가 있는데 이게 한정적이라
list-style:none; 이렇게 초기화를 시키고 백그라운드 이미지를 넣어줌

★그룹선택자

ol과ul 동시에 초기화 시키려면 그룹선택자로 ol,ul{list-style:none;} 이렇게 , 를 넣어서 사용(띄어쓰기 가능)
클래스 . 이랑 구분 = .txt,.con{} (클래스 텍스트와 클래스 컨텐츠 그룹선택한거)

*참고*

1. 높이값 잡는 예제2 html
<div class="contents">
        <h1><img src="images/logo.png" alt="mad for garlic"></h1>
        <p class="sub_title">내용</p>
        <h2>steak</h2>
       ★ <div class="menu">

            <div class="menu_img"><img src="images/menu_01.jpg" alt="herb rybeye steak"> </div>
            <div class="menu_txt">
            <h3>Herb Ribeye Steak</h3>
            <p>내용</p>
            <p class="price">￦ 39,900 </p>
            </div>
        </div>
</div>
그에 해당하는 css
.menu:after{ content:''; display: block; clear: both;}
/*처음에 contents에 줬으나 div class:menu로 줬기때문에 상위요소인 menu에 after를 주는것*/
.menu_img{float: left; width: 250px;}
.menu_txt{float: right; width: 630px;}
/*width값을 패딩을 빼고 잡아서 다시 패딩값 넣지 않아도 되게 띄어서 잡기*/

2. 높이값 잡는 예제 1 css
.contents{width: 1000px; margin: 0 auto; background-color: #eee; padding: 50px; overflow: auto;}
h1{color: #017eba; font-size: 40px;}
.desc{background-color: #017eba; color: #fff; padding: 10px 20px; margin: 20px 0; }
.purpose_img{float: left; width: 300px;}
.purpose_txt{float: right; width: 550px ;}
ul{padding: 10px 20px;}
/*float의 높이값 비설정은 부모요소(contents)에 속성을 넣어서 어떤 값을 더넣어도 높이값을 잡아주도록 함
속성= overflow: auto; (이게 정석은 아님) */

추가 코드

display: flex; 부모요소에 주면 안에 자식들 수평배치해주고 float처럼 무너지지 않는다 크기를 크게줘도 밀리기만 할뿐

그리고 justify-content: space-between; 양쪽 끝으로 붙이고 균등배분을 해준다 float right, position 이런걸로 위치 안잡아줘도 되는 속성