반응형

[html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/01_box_width_height.css">
</head>
<body>
    <!-- 1st 박스 -->
    <div></div>
    <!-- 2nd 박스 -->
    <div></div>
</body>
</html>

[CSS]

/* box 기본속성 : 높이, 가로, 바깥여백, 안쪽여백, 외곽선 */
div{
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 배경색 */
    background-color: red;
    /* 외곽선 */
    /* border : 선두께 선스타일 선색깔 */
    border: 5px solid orange;  // solid가 실선
    /* 안쪽 여백(padding) */
    padding: 30px;
    /* 바깥 여백(margin) */
    margin: 50px;

}

[결과]

 

[html]

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/02_box_detail.css">
</head>
<body>
    <div></div>
</body>
</html>

[CSS]

/* box 기본 속성 : 상세 */
div{
    /* 가로 */
    width: 100px;
    /* 세로 */
    height: 100px;
    /* 외곽선 */
    /* border : 선두께, 선스타일, 선색상 */
    border: 5px solid orange;
    /* 안쪽 여백 : 상/좌/하/우 */
    /* padding: 10px; */
    /* 따로 설정 */
    /* padding-left: 0px;
    padding-top: 30px;
    padding-right: 0px;
    padding-bottom: 30px; */
    /* 축약형 :  */
    /* padding : 상 우 하 좌(12시 기준으로 시계방향) */
    padding: 30px 0 30px 0;

    /* 바깥여백 : 상/좌/하/우 동일하게 설정*/
    /* margin: 10px; */
    /* 따로 설정 */
    /* margin-left: 0px;
    margin-top: 10px;
    margin-right: 0px;
    margin-bottom: 10px; */
    /* 축약 형 */
    /* margin : 상 우 하 좌 */
    margin: 10px 0 10px 0;
}

[결과값]

반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] CSS 디자인 우선순위  (0) 2023.08.09
[CSS] 반응형 웹 이론 - 이미지 처리  (0) 2023.08.09
[CSS] 배경이미지  (0) 2023.08.08
[CSS] 폰트스타일  (0) 2023.08.07
[CSS] 태그선택자  (0) 2023.08.07
반응형
.font_arial{
    /*  폰트 스타일 : pc에 폰트가 있어야 화면에 적용됨  */
    /*  font-family : 스타일1, 스타일2, 스타일3  */
    /*  스타일 1 이 있으면 스타일 1이 적용됨
        없으면 스타일 2이 적용,
        없으면 스타일 3이 적용
    */
    font-family: Arial, Helvetica, sans-serif;
}

.font_roman{
    font-family: 'Times New Roman', Times, serif;
}

.font_italic{
    /* 이텔릭체 */
    font-style: italic;
    /* 굵은 글씨 bold, bolder(더굵게)*/
    font-weight: bolder;
    /* 글자 중앙 정렬 : 이미지는 등은 안됨, 오직 글자만 가능 */
    /* 중앙 정렬 */
    text-align: center;

    /* 왼쪽 정렬 */
    /* text-align: left; */
   
    /* 오른쪽 정렬 */
    /* text-align: right; */

}

폰트사이즈
/* 글자 단위 : px, em(rem), % */
/* 1st p태그 선택 */
p:nth-child(1) {
    /* 상대 크기 단위(글자) */
    /* 1.0em == 16px(웹 브라우저 기본 글자 단위 : 부모 태그에서 상속받음) */
    /* font-size : 100% == 1.0em == 16px */
    /* font-size: 1.0em; */
    /* 고정 크기 */
    font-size: 16px;
}
/* 2nd p태그 선택 */
p:nth-child(2) {
    font-size: 1.5em;
}
/* 3rd p태그 선택 */
p:nth-child(3) {
    font-size: 2.0em;
}

반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] CSS 디자인 우선순위  (0) 2023.08.09
[CSS] 반응형 웹 이론 - 이미지 처리  (0) 2023.08.09
[CSS] 배경이미지  (0) 2023.08.08
[CSS] Box 기본속성  (0) 2023.08.07
[CSS] 태그선택자  (0) 2023.08.07
반응형
기본 선택자
/* 주석 단축키 : Ctrl + / */
/* 코딩 용어 : /(슬래쉬), \(역슬래쉬), ;(세미콜론) */
/* 기본선택자 : html 태그선택자 */
/* 사용법 :
    태그선택자 {
        속성:값;
    }
*/
h1{
    /* 글자색 */
    color: burlywood;
    /* 바탕색 */
    background-color: blue;
}

id 선택자
/* id 선택자 : 기본 선택자 */
/* id 속성(공통) : 태그에 이름을 부여하는 속성(변수명), 유일(관례), js 사용  */
/* name 속성(공통) : 태그에 이름을 부여하는 속성(변수명), jsp, react(서버쪽 통신)에 사용 */
/* 코딩용어 : #(샵) */
/* 사용법)
    #id 선택자 {
        속성 : 값;
    }
*/
/* px(픽셀) : 화면 화소(단위), 고정크기 예) cm, l 등... */
#header{
    /* 가로크기 */
    width: 800px;
    /* 배경색(바탕색) */
    background-color: red;
}

#warp{
    width: 800px;
}

#content{
    width: 300px;
    background-color: green;
}
와일드카드 : 전체 선택자
/* (wildcard) * : 전체 선택자  */
/* 사용법 :
  * {
    속성:값;
  }
 */

* {
    color: red;
}

h1 {
    color: aqua;
    background-color: blue;
}

클래스 선택자
/* 클래스 선택자 */
/* id선택자 vs class 선택자의 차이
    id선택자 : 중복 불가(이름)
    class선택자 : 중복 허용(이름), 실무 디자이너
*/
/* 사용법 :
    .클래스명 {
        속성:값;
    }
*/

.select{
    color: red;
}
속성 선택자 : 특수 선택자
/* 속성 선택자 : 특수 선택자 */
/* 사용법 :
    태그[속성="값"]{
        속성:값;
    }
*/

input[type="text"]{
    background-color: red;
}

input[type="password"]{
    background-color: blue;
}
후손 선택자 : 특수 선택자
/* 후손 선택자 : 특수 선택자 */
/* 부모 태그밑에 있는 자식태그들 모두 선택 */
/* 사용법 :
    (부모)선택자 (자식)선택자 {
        속성 : 값;
    }
*/
#header h1{
    color: red;
}
자식 선택자
/* 자식 선택자 */
/* 부모선택자 바로 아래 자식만 선택해서 디자인 적용 */
/* 사용법 :
    (부모)선택자 > (자식)선택자 {
        속성 : 값;
    }
*/
#header > h1 {
    color: red;
}
반응 선택자
/* 반응 선택자 */
/* 선택자:hover - 마우스가 위로 올라가면 디자인 적용 */
h1:hover {
    color: red
}
/* 선택자:active - 마우스를 클릭하면 디자인 적용 */
h1:active{
    color: blue;
}
상태 선택자
/* 상태 선택자 */
/* input:현재입력가능한 상태일때 디자인 적용 */
input:enabled {
    background-color: white;
}
/* input:현재입력불가능 상태일때 디자인 적용 */
input:disabled {
    background-color: gray;
}
/* input:커서가 있을때(포커스) 디자인 적용 */
input:focus {
    background-color: orange;
}
구조 선택자
/* 구조 선택자 */
li {
    /* 목록 앞에 점 없애기 */
    list-style-type: none;
}
/* 2n : 짝수, 2n+1 : 홀수
    사용법 :
        선택자:nth-child(수식) {
            속성 : 값;
        }
*/
li:nth-child(2n) {
    /* 10진수 : 1~9까지, 16진수 : 1 ~ 15까지, 8진수 : 1 ~ 7까지, 2진수 : 0과 1 */
    /* 16진수 : 10(a), 11(b), 12(c), 13(d), 14(e), 15(f) */
    /* 색깔 지정 : red, (#16진수 6자리, 색상표 표기) */
    background-color: #ff0003;
}

li:nth-child(2n+1) {
    background-color: #800000;
}
반응형
저작자표시 비영리 변경금지 (새창열림)

'CSS > CSS 이론' 카테고리의 다른 글

[CSS] CSS 디자인 우선순위  (0) 2023.08.09
[CSS] 반응형 웹 이론 - 이미지 처리  (0) 2023.08.09
[CSS] 배경이미지  (0) 2023.08.08
[CSS] Box 기본속성  (0) 2023.08.07
[CSS] 폰트스타일  (0) 2023.08.07

+ Recent posts

티스토리툴바