CSS란?
웹 페이지의 디자인과 레이아웃을 정의하기 위한 스타일 언어
style 속성 : CSS (cascading style sheet)
width : 너비, max-width, min-width
height : 높이, max-height, min-height
background-color : 바탕색
padding(태그 내부의 여백) : top, rigth, bottom, left
margin(태그 외부의 여백) : top, rigth, bottom, left
값을 한개만 썼을 때 사방면이 그값으로 적용된다.
각각 지정하고 싶을 땐 4개 값 모두 작성해야 된다.
값을 두개 작성했을 때 상하 ,좌우 값으로 적용된다.
box-sizing : 박스의 크기를 어떻게 설정할지 기준을 설정.
<div style="width : 500px;">
<div style="display : block"> 블록 속성은 부모의 너비만큼 사용한다는 뜻
속성을 추가할 때
속성 명 = "속성 값"
display : 영역의 노출 크기를 어떻게 설정할지 기준을 설정한다.
부모 태그를 기준으로 모든 너비를 차지한다. 높이는 자식의 기준으로
</div>
</div>display : flex; 를 알아보자
-> 블록속성이 있어도 옆으로 나열가능하고 개발자모드에서 여러방법으로 정렬 가능
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
기존에는 title 태그 아래 style 태그를 만들어 css코드를 작성하였는데 css파일을 따로 작성후 외부파일을 link를 이용해 불러오는 식으로 한다. -> 가독성, 편의성
위와 같이 하기 위해선 태그에 class="example" 명을 부여하고 , css 파일에서 example{}으로 선언 후 {} 안에 스타일 속성을 작성하면 된다.
<title>css</title>
<style>
/*기존에 css 코드를 이곳에 작성하던 곳 */ 이제는 여기에 작성하지 않고
</style>
<link rel="stylesheet" href="/style.css"> 링크 태그를 이용해 외부파일을 불러온다.
<!-- link 태그는 외부의 css 파일이나 favicon (인터넷 주소탭 앞에 이미지)을 가져올 때
주로 사용한다. -->
</head>CSS 속성을 알아보자.
div{
/*style 태그에 작성했던 방식으로 그대로 작성하면 된다.*/
}
.display{
display : block;
/*block은 div태그의 기본값, 자기의 너비를 전부 갖고 옆에 자리할 수 없다.*/
display : inline;
/*인라인, span, a 등등은 기본값을 인라인으로 가지고 있고 옆으로 태그가 자리할 수 있다.*/
display : flex;
/*자식 태그들을 정렬시킬 수 있다. 정렬시키는 방식은 여러가지 있다*/
display: inherit;
/* 부모한테 값을 가져와서 적용시킨다. 사용할 일이 거의 없음 */
display: initial;
/* 태그가 기본적으로 가지고 있던 속성으로 초기화 / 기본값을 적용 */
display: none;
/* 화면에서 태그를 보이지않게 지워버린다.
나중에 자바스크립트에서 display 속성이 none으로 적용되어 있으면 선택이 되지 않는다.*/
}
.width{
width: 100px;
/*태그의 너비*/
height: 100px;
/*태그의 높이 */
width: max-content;
/*가지고 있는 자식 태그의 너비 만큼 차지한다.*/
width: min-content;
/*가지고 있는 자식 태그의 최소너비 만큼 차지한다*/
max-width: 100px;
/* 설정한 너비 이상으로 태그의 너비가 커지지 않는다.*/
min-width: 100px;
/* 설정한 너비 이하로 태그가 줄어들지 않는다.*/
}.content{ width : 100px; height: 100px; /* 자식의 태그가 부모영역 이상으로 보이지 않게 설정*/ overflow: hidden; <- 이 속성을 사용하면 지정한 px만큼만 보인다. }
실행결과
/* 자식의 태그를 내용을 스크롤 설정*/ overflow : scroll;
실행결과
/* overflow-x: hidden;*/
/* overflow-y: scroll;*/
/* y축만 스크롤 가능하게 */
/* overflow-x: scroll;*/
/* overflow-y: hidden;*/
/* x축만 스크롤 가능하게 */ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
/* 투명도를 설정해줄 수 있다. 1이 최대치 100%*/
opacity: 0.2;
실행결과
투명해진걸 볼 수 있다.
.text{
font-size : 16px;
/* 글씨의 크기 pc 크롬 기준 기본값이 16px*/
/* 환경에 따라 기본값이 다를 수 있다 모바일,pc 브라우저에 따라*/
font-weight: 500;
/*글씨의 굵기*/
/*기본값은 500이고 글꼴을 가져왔을땐 기본값이 변할수 있다.*/
color : rgba(0, 0, 0, 0.5) ;
/*글씨의 색* rgba / red green blue opacity*/
text-align: center;
/*글자의 정렬을 가운데로*/
text-align: end;
/*글자의 정렬을 오른쪽 끝으로 정렬*/
text-align: start;
/*글자의 정렬을 왼쪽 끝으로 정렬*/
text-decoration: overline;
/*텍스트 위에 줄긋기*/
text-decoration: underline;
/*텍스트에 밑줄 추가*/
text-decoration: none;
/* 텍스트 꾸밈요소 제거, a태그에서 밑줄을 제거할 수 있음*/
letter-spacing: 10px;
/* 글자의 간격 조절*/
} /*태그들의 속성을 작성하고 태그에 한번에 적용 시켜줄 수 있다.*/
/*id 선택자는 css 작성에서 #을 앞에 붙여준다.*/
/*class 보다 id 속성의 스타일을 우선으로 한다. */
#test{ <- id="test"로 할당했기 때문에 앞에 #
color : red;
}
/*클래스 선택자는 css 작성에서 .을 앞에 붙여준다.*/
.block7{
color: blue;
}
/* 같은 속성이 작성되었을 때 맨 밑으로 작성된 속성이 적용된다.*/
.block7{
color: aqua;
} /* *(별) 선택자는 모든 태그의 스타일을 적용시킨다.*/
*{
color: yellow;
}
/*태그 선택자 이름으로도 스타일을 줄 수도 있다.*/
div{
color: gray
}
/*여러 태그에 속성을 같이 적용시킬 때*/
div,h1{
color: brown
}/ 자식 선택자 /
/* 부모태그 div 안에 있는 p 태그에 스타일을 주고 싶을 때 부모태그(한칸띄고)자식태그*/
div p{
}
.test .content{
/* test 클래스를 가지고 있는 태그의 자식 태그 중 content 클래스를 가지고 있는 태그
<div class ="test">
<div class="content">
이 자식 태그가 스타일이 적용됨.
</div>
</div>
*/
}
/* test클래스와 content 클래스를 둘다 가지고 있는 태그를 스타일 주고 싶을 때*/
.test.content{
/*<div class = "test content"></div>*/
}
/* 자식 태그 중 해당 클래스를 가지고 있고 바로 아래 자식일 떄*/
.test > .content{
/* test 클래스가 가지고 있는 태그 자식중 content 클래스를 가지고 있는 자식중에
제일 첫번째 자식
<div class="text">
<div class ="content"></div> <- 이클래스만 스타일이 적용된다.
<div class ="content"></div>
<div class ="content"></div>
</div>
*/
}
<!-- id 선택자 : id 선택자는 문서 안에서 한번만 적용된다.
중복되면 안되고 고유의 명을 정해준다. 레이아웃 스타일을 지정해주거나
이후 자바스크립트를 사용할 때 웹 요소를 구분할 때 사용한다. -->
<!-- class 선택자 : 같은 태그라도 다른 스타일을 적용시킬 때 클래스 선택자를 사용한다.
태그의 클래스명이 중복되도 괜찮다. -->ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
input , label 태그
<body>
<h1>로그인</h1>
<ul>
<li>
<label for="">아이디 :</label>
<!-- input을 사용할 때 라벨붙이는것처럼 input 태그의 이름 -->
<input type="text" id ="user_id">
</li>
<li>
<label for="">비밀번호 :</label>
<input type="password" id="pwd">
</li>
<li>
<label for="">email:</label>
<input type="email" id="mail">
</li>
<li>
<label for="">연락처:</label>
<input type="tel" id="tel">
</li>
<li>
<h1>학생 수</h1>
<label for="">인원(10명까지)</label>
<input type="number" value="1" min="0" max="10" step="1">
<!-- value : 초기값, min : 최소값, max : 최대값, step: 증가량 -->
</li>
<li>
<h1>난이도</h1>
<label for="">난이도(하,중,상)</label>
<input type="range" value="1" min="1" max="10">
</li>
<li>
<input type="submit" value="회원가입">
<!-- button 태그는 타입을 정해줄 수 있는데 기본 속성이 submit -->
<input type="button" value="회원가입">
</li>
</ul>
</body>실행화면
input태그 타입
hidden: 사용자에게 보이지 않지만 서버로 값을 넘길수 있다.
search : 검색 상자를 넣는다.
tel : 전화번호를 입력하는 필드를 넣는다.
url : url주소를 입력할 수 있는 필드를 넣는다.
email : 메일주소를 입력할 수 있는 필드를 넣는다.
password : 비밀번호를 입력할 수 있는 필드를 넣는다.
datetime : 국제 표준시로 설정된 날짜와 시간을 넣는다.
date : 사용자 지역을 기준으로 날짜 연,월,일을 넣는다.
month : 사용자 지역을 기준으로 날짜 연,월,
week: 사용자 지역을 기준으로 날짜 연, 주
range : 수치를 조절할 수 있는 슬라이드 막대를 만든다.
color : 색상표를 만든다.
checkbox : 주어진 항목에서 2개이상 선택가능한 체크박스를 만든다.
radiobox : 주어진 항목에서 1개만 선택가능한 라디오박스를 만든다.
file : 파일을 첨부할 수 있는 버튼을 만든다.
image : 버튼 대신 사용할 이미지를 만든다.
button : 버튼을 만든다.
