상세 컨텐츠

본문 제목

프로그래머 도전기 61일차

프로그래머가 될거야!

by Choyee 2023. 11. 1. 23:16

본문

오늘은

 

오늘은 다시 코딩 테스트 문제를 풀어보았습니다

굉장히 오랜만에 풀어본 것 같은데

쉬운 문제들을 풀어서 그런지 금방 적응할 수 있을 것 같은

느낌이었습니다

CSS는 배우면 배울수록 정말 흥미롭다고 생각합니다

배우고 있는 효과들을 중첩시켜서 굉장한 하나의 효과를 만들어 낼 수 있지 않을까

상상을 하게됩니다

 

 

 

학원 수업

 

배치
- CSS 포지셔닝
= 브라우저 화면 안에서 콘텐츠 영역을 어떻게 배치할지 결정

display : 수평(일렬), 수직배치
float : 수평(요소 독립성 - 왼쪽, 오른쪽) 떠 있는 (부동)
        -> left, right, both
        -> 레이아웃 배치
position : 독립 배치

 

 

* float 속성

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>float 속성</title>
    <style>
        div {
            margin: 10px;
            padding: 10px;
        }
        .box1 {
            background: #f99;
            float: left;  /* box1의 위치가 left가 되고 그 다음 개체는 그 옆에 위치하게 됨 */
        }
        .box2 {
            background: #9f9;
            float: left;
        }
        .box3 {
            background: #99f;
            float: right;
        }
        .box4 {
            background: #f9f;
            clear: both; /* float 속성 해제 */
        }
    </style>
</head>
<body>
    <div class="box1">박스1</div>
    <div class="box2">박스2</div>
    <div class="box3">박스3</div>
    <div class="box4">박스4</div>
</body>
</html>

 


본문 = <section>
사이드바 = <aside>

* HTML4와 HTML5 버전의 차이
HTML4                   ->  HTML5
<div id = "header">   ->  <header>
<div id = "content">  ->  <section>
<div id = "footer">    ->  <footer>


<main>태그
= <section>태그를 포함하는 태그 

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>애완견 메인 페이지입니다...</title>
    <link rel="stylesheet" href="./css/style.css">
</head>
<body>
    <div id="wrap">
        <header>
            <nav>
                <ul>
                    <li><a href="#">애완견 종류</a></li>
                    <li><a href="#">건강 돌보기</a></li>
                    <li><a href="#">입양하기</a></li>
                    <li><a href="#">더불어살기</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <h2>애완견 종류</h2>
            <section>
                <h3>활달한 강아지</h3>
                <dl>
                    <dt>요크셔테리어</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>말티즈</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>치와와</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                </dl>
            </section>
            <section>
                <h3>온순한 강아지</h3>
                <dl>
                    <dt>요크셔테리어</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>말티즈</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>치와와</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                </dl>
            </section>
            <section>
                <h3>사나운 강아지</h3>
                <dl>
                    <dt>요크셔테리어</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>말티즈</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                    <dt>치와와</dt>
                    <dd>
                        생기있고 활달한 성질을 가지고 있으며 자신보다 몸집이 큰 개나
                        집에 들어온 침입자를 겁내는 일이 없는 좋은 번견이고 
                        우리나라 최고의 가정견으로 자리잡고 있다
                    </dd>
                </dl>
            </section>
        </main>
        <aside>
            <h3>건강한 강아지는...</h3>
            <ul>
                <li>코가 젖어있고 눈꼽이 없어야 합니다</li>
                <li>털에 윤기가 있는 것을 골라야 합니다</li>
                <li>코가 젖어있고 눈꼽이 없어야 합니다</li>
                <li>털에 윤기가 있는 것을 골라야 합니다</li>
                <li>코가 젖어있고 눈꼽이 없어야 합니다</li>
                <li>털에 윤기가 있는 것을 골라야 합니다</li>
            </ul>
        </aside>
        <footer>
            <p>Copyright 2023 kh-webapp</p>


        </footer>
    </div>
</body>
</html>
/* index.html에 연결 */
* {
    margin: 0;
    padding: 0;
}

#wrap {
    width: 90%;
    margin: 0 auto;
}

header {
    height: 60px;
    padding: 10px;
    background: #060;
}

header nav {
    width: 70%;  /* header 크기의 70% */
    float: right;
    text-align: center;
}

nav ul li {
    /* float: right; */
    display: inline-block;
    line-height: 60px;
    list-style: none;
    margin: 0 16px;
}

nav ul li a {
    color: #faa;
    text-decoration: none;
}

main {
    height: 600px;
    padding: 6px;
    border: 5px solid #ccc;
}

main h2 {
    margin: 10px 20px;
}

section {
    float: left;
    width: 30%;  /* mian 크기의 31% */
    height: 520px;
    border: 1px dotted #ccc;
    margin: 5px;
    padding: 5px;
}

section h3 {
    padding: 16px 32px;
    background: url(../images/dot.png) no-repeat;
    background-position: 12px 24px;  /* x좌표, y좌표 */
}

section dl dt {
    font-weight: bold;
}

section dl dd {
    margin-bottom: 16px;
}

aside {
    clear: both;
    padding: 10px;
    background: greenyellow;
}

aside h3 {
    padding-left: 30px;
}

aside ul li {
    margin: 10px 60px;
}

footer {
    padding: 20px 10px;
    background: #555;
}

footer p {
    text-align: center;
    color: #fdd;
}

 

http://choyeehosting.dothome.co.kr/

 

애완견 메인 페이지입니다...

 

choyeehosting.dothome.co.kr

 

 

 

 

CSS 공부

 

<<transform 변형>>
= 사물을 회전시키거나 원근 왜곡, 확대, 축소, 늘리기, 기울이기 등 가능
(* 좌우 여백을 자동으로 설정하게 하면 요소가 컨테이너 중앙에 있게 된다)

=> 변형 기준점을 변경할 수도 있다 = 요소의 중앙 -> 요소의 다른부분 기준
     => center;, top left;, bottom right; 등, x축과 y축을 중심으로도 가능하고 z축 까지도 가능하다

* rotate
= 회전
-> deg, grad, rad, turn 단위 사용 => 보통은 deg를 사용한다
-> transform: rotate(숫자deg;)

* scale
= 요소의 크기를 변화시킬 때 사용 가능
   크기를 확대하거나 축소 가능
-> scaleX(), scaleY(), scaleZ(), scale3D()

* translate
= 요소를 움직이는 기능
=> 오른쪽, 위, 아래 혹은 두 방향으로 동시에 움직일 수 있다(대각선 방향)
-> translateX(), translateY(), translate3D(), translateZ()
=> 값으로는 길이나 비율을 사용한다

* skew
= 요소를 2차원 평면상에서 기울이는 기능
-> skewX, skewY

 

 

 

 

 

Coding Test Practice
Description
어떤 정수들이 있습니다. 이 정수들의 절댓값을 차례대로 담은 정수 배열 absolutes와 이 정수들의 부호를 차례대로 담은 불리언 배열 signs가 매개변수로 주어집니다. 실제 정수들의 합을 구하여 return 하도록 solution 함수를 완성해주세요. 
function solution(absolutes, signs) {
    var answer = 0;
    for(var i = 0; i < absolutes.length; i++){
        if(signs[i] == true){
            answer += absolutes[i];
        }else if(signs[i] == false){
            answer -= absolutes[i]
        }
    }
    return answer;
}

 

 

 

Description
array의 각 element 중 divisor로 나누어 떨어지는 값을 오름차순으로 정렬한 배열을 반환하는 함수, solution을 작성해주세요. divisor로 나누어 떨어지는 element가 하나도 없다면 배열에 -1을 담아 반환하세요.
function solution(arr, divisor) {
    var answer = [];
    arr.sort((a, b) => a - b);
    for(var i = 0; i < arr.length; i++){
        if(arr[i] % divisor == 0){
            answer.push(arr[i]);
        }
    }
    if(answer.length == 0){
        answer.push(-1)
        return answer;
    }else if(answer.length != 0){
        return answer;
    }
}

 

 

 

Description
프로그래머스 모바일은 개인정보 보호를 위해 고지서를 보낼 때 고객들의 전화번호의 일부를 가립니다.
전화번호가 문자열 phone_number로 주어졌을 때, 전화번호의 뒷 4자리를 제외한 나머지 숫자를 전부 *으로 가린 문자열을 리턴하는 함수, solution을 완성해주세요. 
function solution(phone_number) {
    var answer = '';
    for(var i = 0; i < phone_number.length; i++){
        if(i < phone_number.length-4){
            answer += '*';
        }else{
            answer += phone_number[i];
        }
    }
    return answer;
}

 

 

 

 

 

 

2023. 11. 01 (수)

저작자표시 비영리 변경금지

'프로그래머가 될거야!' 카테고리의 다른 글

프로그래머 도전기 63일차  (0) 2023.11.05
프로그래머 도전기 62일차  (2) 2023.11.04
프로그래머 도전기 60일차  (1) 2023.10.31
프로그래머 도전기 59일차  (2) 2023.10.30
프로그래머 도전기 58일차  (0) 2023.10.29

관련글 더보기

티스토리툴바