3월4일 내용정리
1.float와 flexbox
float와 flexbox는 수평정렬을 위해 사용 되고 있다.
float는 본래 수평정렬을 위해 고안된 css프로퍼티가 아니며,
사용하면서 여러 문제점이 생겨 이제는 사용을 자제하고
flexbox를 대신 사용하는 추세이다.
1-1.float 란??
수직으로 나열된 박스를 수평으로 나열
1-2.flexbox 란?
flexbox는 행과 열 로 이루어져 있고 1차원 레이아웃에서 설계하도록 만들어진 메서드로 요즘에는 float를 대신해서 쓰임
2.index 란?
index.html은 화면의 첫화면이라고 서로 약속함
예를 들어 로그인, 회원가입, 사이트맵 등 각각 해당 html을 만들고
index.html에 링크로 연결해놓음 자바의 메인클래스같은
메인 html이 필요하다.
3.클래스와 아이디 차이
클래스와 아이디는 원하는 태그에 프로퍼티를 적용하고 싶을때 아래와 같이 html선언 하면 된다.
<원하는 태그 class="클래스명">
<원하는 태그 id="아이디명">
css에는 아래와 같이 선언하면 된다.
.클래스명{ }
#아이디명{ }
차이점은 클래스는 원하는 태그 여러번 써도 되나 아이디는 딱 한번만 id=이름 를 쓴다.주로 위치지정에 쓰임.
4.block 과 inline
block은 너비와 높이를 가질수 있으며,줄바꿈이 자동적으로 됨
inline은 너비와 높이를 가질수 없으며,줄바꿈안됨
즉,동일한 라인에서 다른 요소와 함께 위치할 수 있다.
html태그는 디폴트로 block 또는 inline 특성을 각각 한가지씩 가지지만
display프로퍼티를 통해서 특성ㅇ 변경이 가능하다.
display:inline-block 로 설정 할 경우 줄바꿈을 안하면서 너비와 높이르 가질수 있게됨.
5.overflow:hidden
overflow:hidden 은 안에 내용이 넘칠때 안에 내용을 지정한 사이즈만큼만 보여주고 넘치는 부분은 잘라버리는게 본래 목적 이었으나,
float는 떠다니는 부유체와 같은 성질이라 어떠한 영역이 지정이 안되서
크기나 높이를 레이아웃에서 인식이 안되서 어떠한 영역을 얻지 못해 프로퍼티 적용이 안되는데, overflow:hidden 을 넣어주면 레이아웃에서 영역으로 인식하는거 같다.
자식 요소에 float속성을 적용하면 부모요소에 overflow:hidden을 넣어줘야 레이아웃에서 영역으로 인식하여 프로퍼티 적용이됨.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>스타일 연습</title>
<!--스타일 적용-->
<style>
*{margin: 0px;
padding: 0px;}
/* 아래 * 는 모든 태그에 스타일 적용*/
/* 최종크기=width+2*padding+2*border두께*/
/*body는 12로 나누어 떨어진값이 배치하기 좋다. 예) width:980px */
/*스타일 시트는 위에서 아래로 처리되면 동일한 태그에 곁치는 스타일 적용했다면
제일 마지막에 있는 태그의 지정 스타일을 적용한다.*/
/*body 전체적으로 적용 되는 스타일 적용*/
/*auto 는 block특성을 가진 요소에 대한 중앙 정렬할때 사용
body의 전체적인 요소를 가운데로 정렬 했음*/
body{
width: 980px;
margin: 0px auto;
}
a{
text-decoration: none; /*링크의 밑줄 없앴음*/
color: black /*링크의 글자색을 지정*/
}
a.hover{
/*링크 부분 글자에 마우스가 올라오면 지정한 css스타일을 적용해라*/
/*none 으로 지정해서 text-decoration 디폴드로 설정 되어 있는 부분 리셋해줌*/
text-decoration: none;
}
li{
/*none 으로 지정해서 list-style 디폴드로 설정 되어 있는 부분 리셋해줌*/
list-style: none;
}
/* .클래스명{ }, #아이디명{ } */
.top{
color : blueviolet; /* 글자 색 */
font-family: "맑음고딕체";/* 글꼴 */
background-color: aquamarine; /* 배경색, 지울부분 */
width: 250px; /* 너비 */
height: 60px; /* 높이 */
line-height: 60px ; /*수직정렬 height와line-height의 동일하게 하면 가운데에 위치한다. */
text-align:center; /* 가로 정렬 : 가운데 */
margin: 20px 10px 30px 25px;
}
/*여백 한줄에 쓸때
4개 다 쓸 경우 시계 방향으로 [위 오른쪽 아래 왼쪽] 예) 3px 4px 5px 6px
위/아래 동일하고 왼/오 동일 할때 [위/아래 왼/오] 예)10px 20px */
.topNav{
background-color: chartreuse;
}
.topNav>ul{
/*자식 요소에 float 속성을 적용했을때, 내 범위 안에 있는 자식들만 float속성을 적용한다.*/
overflow: hidden;
}
.topNav li{ /*topNav 의 후손 조상네임(한칸띄기)후손네임*/
float: left; /* 왼쪽부터 배치*/
}
/*블럭레벨 태그는 너비와 높이 가짐(알아서 줄바꿈됨), 인라인레벨 태그는 너비,높이 못가짐(줄바꿈안됨)
이러하 단점을 해결 할려고 inline-block 이라는 게 생김 줄바꿈을 안하면서 너비와 높이르 가짐*/
.topNav li>a{
display: inline-block;
padding: 20px 50px;
/*width와 height를 사용할수 있지만 글자 갯수에따라 박스사이즈가
다르게 지정되기때문에 padding을 써서 동일하게 지정해 준다.*/
}
.topNav li>a:hover{
/*마우스가 글자 위에 올려놓으면 색상이 변한다.*/
background-color: blue;
}
.mainMenu{
font-family: 궁서체 ;
color : blueviolet; /* 글자 색 */
background-color :darkgreen /* 배경색, 지울부분 */
}
.mainMenu>ul{
overflow: hidden;/*자식 요소에 float 속성을 적용했을때, 내 범위 안에 있는 자식들만 float속성을 적용한다.*/
}
.mainMenu li{
float: left;
}
.mainMenu li>a{
display: inline-block;
padding: 20px 50px;
}
.mainMenu li>a:hover{
background-color:cadetblue
}
.mainImg{
border: 1px solid black;
margin: 20px 10px 30px 25px;
text-align:center;
}
</style>
</head>
<body>
<h1 class="top">사이트 연습</h1>
<div class="topNav">
<!--ul>li*3>a 에밋-->
<!--감싸고 있는건 부모, 안에 들어있는건 자손, 자손안에 들어있는건 후손-->
<!--사이트 들어 왔을때 보이는 첫화면을 index 라고 한다.-->
<!--index.html은 화면의 첫화면이라고 서로 약속함-->
<!--로그인, 회원가입, 사이트맵 등 각각 해당 html을 만들고
index.html에 링크로 연결해놓음 자바의 메인클래스같은 역할-->
<ul>
<li><a href="#">로그인</a></li>
<li><a href="#">회원가입</a></li>
<li><a href="#">사이트맵</a></li>
</ul>
</div>
<h1 class="top">메인메뉴</h1>
<!--html페이지에서 딱 한번만 쓰면 id=이름 를 쓴다. 유일해야함. 주로 위치지정에 쓰임.
그반대로 여러번 쓰면 class=이름 을 쓴다.-->
<div class="mainMenu">
<ul>
<li><a href="">메뉴1</a></li>
<li><a href="">메뉴2</a></li>
<li><a href="">메뉴3</a></li>
<li><a href="">메뉴4</a></li>
</ul>
</div>
<h1 class="mainImg">그림부분</h1>
<div>
<ul>
<li><a href="">그림1</a></li>
<li><a href="">그림2</a></li>
<li><a href="">그림3</a></li>
<li><a href="">그림4</a></li>
</ul>
</div>
</body>
</html>