기타

2022 제주코딩베이스캠프 DAY 2

무어99 2022. 8. 17. 22:34

display 속성

  • block : 박스 형태. 레이아웃 작성에 사용하는 요소들은 block
  • inline : 텍스트처럼 배치 따라서 width와 height를 설정할 수 없음
  • none -> block : 구성요소가 생기는 듯한 모션을 주기 위해 자주 사용한다.
  • inline-block

CSS를 이용한 이단 칼럼 디자인 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        article{
            font-size: 0;
            background: yellow;
        }
        section{
            display: inline-block;
            font-size: 24px;
            vertical-align: top;
            
            border: 5px solid red;
            box-sizing: border-box;
        }
        .a {
            width: 30%;
            background: dodgerblue;
        }
        .b {
            width: 70%;
            background: greenyellow;
        }
    </style>
</head>
<body>
    <article>
        <section class="a">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta blanditiis tempora debitis! Tempora similique facilis, reiciendis reprehenderit animi non praesentium velit eveniet doloremque, in adipisci vero deserunt at quidem unde.
        </section><!--여백의 정체 inline이다보니 엔터를 띄운 공백 -> 스페이스바 한번의 공백으로 바뀜-->
        <!-- 이 공백을 없애기 위해서 부모인 article을 이용한다. -->
        <section class="b">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Soluta blanditiis tempora debitis! Tempora similique facilis, reiciendis reprehenderit animi non praesentium velit eveniet doloremque, in adipisci vero deserunt at quidem unde.
        </section>
    </article>
</body>
</html>

결과창

Box Model

  • margin : 외부여백
  • padding : 내부여백 - 내용과 경계선의 여백
  • box-sizing: border-box;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box Model</title>
    <style>
        body{
            margin: 0;
        }
        .box{
            width: 300px; /* 가로폭 300px */
            height: 200px;  /* 세로폭 200px */
            margin: 50px;  /* 외부여백 */
            padding: 50px;	/* 내부여백: 내용과 경계선의 여백 */
            
            box-sizing: border-box;  /* padding까지 합쳐서 300x200으로 설정하는 것 */
            /* 이 설정이 없으면 원래는 padding 50 때문에 50+300+50으로 가로폭이 400이다. */
        }
    </style>
</head>
<body>
    <div class="box">ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ</div>
</body>
</html>

CSS를 이용한 반응형 웹앱

  • 미디어 쿼리(media quries) 사용
@media(min-width:600px){
	/* 600px 이상인 경우에 적용되는 코드 */
}

 

 

반응형 웹, min-width와 max-width 중 어떤 것을 사용하는게 좋을까

글을 시작하기 전에..이 질문에 대한 답은 정답이 없으며, 작업자 개개인마다 선호하는 방식이 다를 수 있습니다. 이 글 역시 제 생각을 쓴 것이니 참고 삼아 봐주세요~ 반응형 웹을 만드는 요소

studiomeal.com

CSS를 이용한 좌측 네비와 사라지는 모션

position 속성 사용법

  • static(기본 값) : 위치를 지정하지 않을 때 사용한다.
  • relative: 위치를 계산할 때 static의 원래 위치부터 계산한다.
  • absolute : 원래 위치와 상관없이 위치를 지정할 수 있다. 단, 가장 가까운 상위 요소를 기준으로 위치가 결정된다.
  • fixed : 원래 위치와 상관없이 위치를 지정할 수 있다. 하지만 상위 요소에 영향을 받지 않기 때문에 화면이 바뀌더라도 고정된 위치를 설정할 수 있다. 브라우저 화면의 상대 위치를 기준으로 위치가 결정된다.

 

rgba(0,255,0,0.7) => 마지막 매개변수는 투명도

 

transform: translateX(-100%)

=> 이동, 회전 등등 을 쓸 때 transform / left, top 값을 바꾸는 것보다 좀 더 빠름 / translate의 기준은 본인이라 -100%은 x축으로 본인 width의 크기만큼 좌측으로 이동함

 

transition: 0.5s;

=> 애니메이션을 만들기 위해서는 애니메이션을 한다고 지정을 해줘야함 / 뭘 애니메이션으로 만드는 것인지, 재생시간은 얼마인지를 설정해야한다.

<!-- input과 nav는 형제 관계 --->
<label for="main-menu-check">메뉴</label>
<input type="checkbox" id="main-menu-check">
<nav class="main-menu">
    <a class="main-menu-item" href="">menu1</a>
    <a class="main-menu-item" href="">menu2</a>
    <a class="main-menu-item" href="">menu3</a>
    <a class="main-menu-item" href="">menu4</a>
    <a class="main-menu-item" href="">menu5</a>
</nav>

<style>
.main-menu{
	/* 처음은 메뉴가 안보이게 */
	/* display: none; */

	/* absolute => 인라인 블록느낌으로 width, height로 크기 지정 가능 */
	/* position: absolute; */
	/* fixed => 스크롤 해도 고정 */
	position: fixed;
	left: 0;
	top: 0;
	/* background: rgb(0, 255, 0); */
	/* rgba 마지막 매개변수는 투명도 */
	background: rgba(0, 255, 0, 0.7);
	width: 20%; /* 부모를 기준 */
	height: 100%;
	padding-top: 90px;

	/* 이동, 회전 등등을 쓸때 transform 
	left top을 바꾸는 것보다 좀 더 빠름
	transform3d가 있음*/
	transform: translateX(-100%); /*translate의 기준은 본인임 -100%는 이 친구 크기만큼*/

	/* 애니메이션을 만들기 위해서는 애니메이션을 한다고 지정을 해줘야한다.
	뭘 애니메이션으로 만들것이냐, 재생시간을 설정해야한다.*/
	transition: 0.5s;
}
.main-menu-item{
	display: block;
	background-color: white;
	margin: 10px;
}
#main-menu-check {
	/* fixed속성 위에 fixed가 있으면 서로 겹쳐서 나중에 깔린에가 위로감 */
	/* 따라서 z-index 사용. 숫자가 클수록 위로 올라옴 */
	position: fixed;
	/* 체크박스만 왼쪽으로 이동시켜 화면에서 사라지게 하고 label을 통해서 클릭 */
	left: -10000px;
	z-index: 1;
	
}
/* 체크박스가 체크될때 */
/* 아래나오는 형제들 중에(~) main-menu 클래스 전부 선택 */
#main-menu-check:checked ~ .main-menu{
	background: rgba(244,244,0, 0.7);
	/* display: block; */
	transform: translateX(0);
}
/* 레이블 중에서 for값이 main-menu-check인애 */
label[for='main-menu-check']{
	position: fixed;
	left: 40px;
	top: 20px;
	z-index: 1;

}
</style>

CSS-FLEX

 

이번에야말로 CSS Flex를 익혀보자

이 튜토리얼은 “차세대 CSS 레이아웃” 시리즈의 첫번째 포스트입니다. 이번에야말로 CSS Flex를 익혀보자 이번에야말로 CSS Grid를 익혀보자 벌써부터 스크롤의 압박이 느껴지고,‘좀 편안하게 누

studiomeal.com