반응형

🚀

10월 초에 인스타그램으로 스토리 넘기다가 코드 캠프에서 5일간 무료로 강의를 진행한다고 하여
"코딩 부트캠프는 어떤 식으로 진행될까?", "시간도 많은데 한번 해보자" 하여 바로 지원을 했습니다.

장소는 패스트 파이브 구로점이라 쬐끔 멀긴 했지만 그래도 좋은 경험이 될 것 같아서 예치금 넣고 수강확정을 했습니다.

 

패스트 파이브는 여러 번 가봤지만 커피머신, 시리얼과 같은 먹거리가 구비되어있어서 일할 맛(?) 날 거 같습니다 ㅋㅋㅋ...
큰 컵에다가 얼음 꽉 채우고 에스프레소 2샷에 물 좀 따라서 마시니 좋더라고요~ㅎㅎ,,,

 

창가가 보이는 제자리,,,,,, 첫날이라 낯설기도 했고 사진이 이것밖에 없네요 하하 ^^;;

 

📖 배운 내용

 

1. 간단한 회원가입 폼 만들기

<html>
    <head>
        <link rel="stylesheet" href="02-signup.css">
    </head>

    <body>
        <!-- 아래코드는 회원가입 관련 코드입니다. -->
        <h1>회원가입</h1>
        <input type="text" placeholder="이메일을 입력해 주세요."><br><br>
        <input type="text" placeholder="이름을 입력해 주세요."><br><br>
        <input class="aaa" type="password" placeholder="비밀번호를 입력해 주세요."><br><br>
        <input id="qqq" class="aaa" type="password" placeholder="비밀번호를 다시 입력해 주세요."><br><br> 
        <select>
            <option selected disabled>지역을 선택하세요.</option>
            <option>서울</option>
            <option>인천</option>
            <option>경기</option>
        </select><br><br>
        <input type="radio" name="gender">여성
        <input type="radio" name="gender">남성<br><br>
        <input type="checkbox">이용약관 개인정보 수집 및 이용, 
        마케팅 활용 선택에 모두 동의합니다.<br><br>
        <hr>
        <!-- <input type="button" value="가입하기"> -->
        <button>가입하기</button>
    </body>
</html>

 

 

2. 박스 모델 실습(display : flex;)

<!DOCTYPE html>
<html lang="ko">
<head>
    <title>박스모델 연습</title>
    <style>
        .item{
            background-color: red;
            width: 100px;
            height: 100px;
            margin: 30px;
            border: 3px solid black;
            box-sizing: border-box;
            padding: 30px;
        }
        .wrapper{
            width: 1000px;
            height: 1000px;
            background-color: skyblue;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
        }
        .wrapper .wrapper1{
            display: flex;
            flex-direction: row;
        }
        .wrapper .wrapper2{
            display: flex;
            flex-direction: row;
        }
        .qqq{
            width: 100px;
            height: 100px;
            border: 3px solid black;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="qqq">Box111</div>
    <div class="wrapper">
        <div class="wrapper1">
            <div class="item">Box1</div>
            <div class="item">Box2</div>
            <div class="item">Box3</div>
        </div>

        <div class="wrapper1">
            <div class="item">Box4</div>
            <div class="item">Box5</div>
            <div class="item">Box6</div>
        </div>
        
    </div>
    <div class="qqq">Box222</div>
</body>
</html>

 

 

3. 싸이월드 클론 코딩(레이아웃 짜기)

<HTML>

<!DOCTYPE html>
<html lang="ko ">
<head>
    <link rel="stylesheet" href="styles/index.css">
    <title>싸이월드</title>
</head>
<body>
    <div class="background">
        <div class="outerbox">
            <div class="wrapper">
                <div class="wrapper__left">
                    <div class="wrapper__left__header"></div>
                    <div class="wrapper__left__body"></div>
                </div>
                <div class="wrapper__right">
                </div>
            </div>
        </div>
    </div>
</body>
</html>

<CSS>

.background{
    width: 1024px;
    height: 600px;
    background-image: url('../images/background.png');
    padding-left: 20px;
    padding-top: 20px;
}
.outerbox{
    width: 808px;
    height: 544px;
    background-image: url('../images/outerbox.png');
}
.wrapper{
    display: flex;
    flex-direction: row;
    /* justify-content: center;
    align-items: center; */
    padding-left: 32px;
    padding-top: 32px;
}
.wrapper__left{
    width: 208px;   
    height: 472px;
    background-color: skyblue;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.wrapper__left__header{
    
}

.wrapper__left__body{
    width: 208px;
    height: 430px;
    background-color: hotpink;
}

.wrapper__right{
    width: 524px;   
    height: 472px;
    background-color: springgreen;
}

 

사실 html이나 css는 네이버 로그인 페이지 클론 코딩 프로젝트를 진행하면서 어느 정도 감도 익히고 태그명이나 css 클래스, 아이디, 태그에 속성 부여하는 것도 해봐서 멘토님이 강의하시는 내용 대부분을 이미 알고 있었지만,

현업에서 어떠한 방식으로 코딩하는지, 그리고 제가 헷갈렸던 display : flex;를 어떻게 사용하는지에 대해 배운 것은 아주 큰 도움이 되었습니다.

div {
		display: flex;
		flex-direction: row;         /* 행기준: row, 열기준: column */
		justify-content: center;     /* flex-direction 수평 방향으로 자식박스 정렬 */
		align-items: center;         /* flex-direction 수직 방향으로 자식박스 정렬 */
}

flex-direction

값  의미  기본값
row Itmes를 수평축(왼쪽에서 오른쪽으로)으로 표시 row
row-reverse Items를 row의 반대 축으로 표시  
column Items를 수직축(위에서 아래로)으로 표시  
column-reverse Items를 column의 반대 축으로 표시  

justify-content

값 의미 기본값
flex-start Items를 시작점(flex-start)으로 정렬 flex-start
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  

align-content

값 의미 기본값
stretch Container의 교차 축을 채우기 위해 Items를 늘림 stretch
flex-start Items를 시작점(flex-start)으로 정렬  
flex-end Items를 끝점(flex-end)으로 정렬  
center Items를 가운데 정렬  
space-between 시작 Item은 시작점에, 마지막 Item은 끝점에 정렬되고 나머지 Items는 사이에 고르게 정렬됨  
space-around Items를 균등한 여백을 포함하여 정렬  

 

flex 연습해볼 수 있는 사이트

 

Flexbox Froggy

A game for learning CSS flexbox

flexboxfroggy.com

flex가 뭔지 잘 모르겠다! 하시는분들에게 강추드립니다. 24단계까지 있는데 30분~1시간만에 다 풀수 있으니 추천드려요

 

그리고 처음에 강의 시작할 때 개발환경 세팅하고 슬랙과 노션을 사용해야 해서 멘토님이 알려주셨는데 스타트업에서 많이 사용되는 툴이기도 하고 직접 사용해보니 편하고 좋은 부분들도 많아 좋은 경험이 되었습니다.

 

시간표가 월~금 5일간 14:00~18:00+@인데 숙제도 있고 다른 할 것도 많아서
이번 주는 지옥의 주(?)가 될 것 같습니다 ㅜ.ㅜ

 

반응형
저작자표시 비영리

'💻IT' 카테고리의 다른 글

json 데이터 정렬해주는 사이트  (0) 2021.10.20
[교육] {코드캠프} 프리캠프 8기 - 2일차 (싸이월드 홈 부분 완성, 자바스크립트 교육)  (0) 2021.10.20
[CS 지식] 내가 공부하려고 만든 신입 개발자 면접 지식 모음집  (9) 2021.10.13
🚀이모지 목록 테이블 (velog 이모티콘, github 이모티콘)  (0) 2021.09.10
2021 스택오버플로우 개발자 설문조사 (Stack Overflow Developer Survey)  (0) 2021.08.22

+ Recent posts

티스토리툴바