24.07.05 Day05

최지원·2024년 8월 12일

CSS html

삼성중공업 DT 제조 혁신 과정

목록 보기

5/62

css의 초기화

https://meyerweb.com/eric/tools/css/reset/

!important

CSS는 같은 속성을 여러 번 정의했을 때, 나중에 설정한 값이 적용된다. 만약 나중에 설정한 값이 적용되지 않게 하려면 속성값 뒤에 *!important*를 붙인다.

실습

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>코코아톡</title>
    <link rel="stylesheet" href="https://meyerweb.com/eric/tools/css/reset/reset.css">
    <link rel="stylesheet" href="./style.css">
    <style>

    </style>
</head>

<body>
    <!-- 전체 -->
    <div class="wrap">

        <!-- 왼쪽 내용 -->
        <div class="side-panel">
            <h3>데스크탑 버전에선 이런 기능도 쓸 수 있어요!</h3>
            <ul class="side-actions">
                <li class="action">
                    <button>모두 읽음</button>
                </li>
                <li class="action">
                    <button>채팅방 보관</button>
                </li>
                <li class="action">
                    <button>예약 전송</button>
                </li>
                <li class="action">
                    <button>킹왕짱 기가막힌 기능</button>
                </li>
            </ul>
        </div>

        <!-- 오른쪽 내용 -->
        <div class="content">
            <div class="header">
                <span class="tab-item activated">채팅</span>
                <span class="tab-item">오픈채팅</span>
            </div>
            <ul class="chatroom-list flex column">
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">비즈니스 관련 질문과 답변</span>
                        <span class="chatroom-last-msg">저는 프로젝트 관리에 대해 경험이 많습니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">코딩 고수를 위한 질문과 답변</span>
                        <span class="chatroom-last-msg">코드 최적화에 대해 토론해 보는 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">디자인 아이디어 공유</span>
                        <span class="chatroom-last-msg">새로운 트렌드에 대해 이야기 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">창업 아이디어 브레인스토밍</span>
                        <span class="chatroom-last-msg">빠르게 변화하는 시장에 적응하는 방법을 고민 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">자유로운 토론 공간</span>
                        <span class="chatroom-last-msg">다양한 주제에 대해 의견을 나누고 있습니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">음악과 문화에 대한 이야기</span>
                        <span class="chatroom-last-msg">최신 음악 트렌드에 대한 의견을 공유 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">여행지 추천과 여행 이야기</span>
                        <span class="chatroom-last-msg">다음 휴가 계획을 세우는 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">식사 메뉴 논의</span>
                        <span class="chatroom-last-msg">오늘 저녁은 무엇을 먹을까요?</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">테크놀로지 트렌드와 논의</span>
                        <span class="chatroom-last-msg">블록체인 기술에 대해 배우고 있습니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">건강과 피트니스 토론</span>
                        <span class="chatroom-last-msg">새로운 운동 루틴에 대해 고민 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">패션과 스타일 공유</span>
                        <span class="chatroom-last-msg">오늘의 패션 코디네이션에 대해 이야기 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">독서와 문학 토론</span>
                        <span class="chatroom-last-msg">클래식과 현대 문학에 대해 토론 중입니다.</span>
                    </div>
                </li>
                <li class="chatroom flex row">
                    <img src="./room-icon.webp" alt="채팅방의 아이콘" class="chatroom-icon">
                    <div class="chat-descriptions flex column">
                        <span class="chatroom-title">영화와 TV 드라마 추천</span>
                        <span class="chatroom-last-msg">최근 본 영화에 대해 이야기하고 있습니다.</span>
                    </div>
                </li>

            </ul>
        </div>
    </div>
</body>

</html>

CSS

* {
    /* border의 두께가 굵을 경우 width의 기준값을 content에 맞춤*/
    box-sizing: border-box !important;
}

/* 레이아웃 경계 */
/* div, span {
    background-color: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.1);
} */

/* 전체 */
.wrap {
    display: flex;
    height : 100%;
    justify-content: center;
    gap: 24px;
}

body {
    height: 100vh;
    background-color: #E6E6E3;
    overflow: hidden;
}

/* 왼쪽 내용 */
.side-panel {
    display: none;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
    ul {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
}

button {
    width: 100%;
    height: 42px;
    border-radius: 12px;
    background-color: #fff;
    border: none;
    font-weight: 600;
}

button:hover {
    cursor: pointer;
}

h3 {
    font-size: 18px;
    padding: 12px;

    /* .side-panel의 자손인 h3 */
    .side-panel & {
        margin-bottom: 12px;
    }
}

/* 오른쪽 내용 */
.header {
    display: flex;
    flex-direction: row;
    padding: 18px;
    gap: 6px;
    align-items: flex-end;
    background-color: #fff;
    box-shadow: 0 12px 36px -14px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 100;
}

.tab-item {
    color : #888;
    font-size: 18px;
    font-weight: 600;

    /* .tab-item과 .activated를 둘다 가지고 있는 무언가 */
    &.activated {
        font-size: 22px;
        color : #333;
    }
}

.flex {
    display: flex;
    &.row {
        flex-direction: row;
    }
    &.column {
        flex-direction: column;
    }
}

.tab-item:hover {
    cursor: pointer;
}

.chatroom-list {
    padding: 18px;

    /* 넘치는 부분 스크롤 만들기 */
    height: 100%;
    background-color: #fff;
    overflow-y: scroll;
}

.chatroom {
    padding: 18px;
    border-bottom: 1px solid #00000012;
    gap: 12px;

    img {
        width: 36px;
        height: 36px;
        border-radius: 12px;
        border: 1px solid #00000010;
    }
}

.chat-descriptions {
    gap: 4px;
}

.chatroom-title {
    font-size: 16px;
    font-weight: 600;
}

.chatroom-last-msg {
    font-size: 13px;
}

.filling {
    min-height: 50px;
}

/* 미디어쿼리 */
@media screen and (min-width:800px){
    .side-panel {
        display: flex;
    }
}

CSS 전처리기

CSS의 확장 문법을 사용하여 더욱 간편하고 강력한 스타일링을 할 수 있는 도구

브라우저가 자체적으로 해석할 수 없으나 컴파일을 통해 css로 변환

Sass, SCSS, Less

node.js

cmd에서 node 연결
C:\Users\samsung>node -v v20.15.0
C:\Users\samsung>node

if문

if(won.age > moon.age){
    console.log(won.name + '이' + moon.name + '보다 나이가 많습니다.')
} else {
    console.log(moon.name +'이'+ won.name +'보다 나이가 많습니다.')
}

삼항연산자

console.log((won.age < moon.age ? [won.name](http://won.name/) : [moon.name](http://moon.name/)) + '이 젊습니다.');
참일경우 앞 연산자 출력, 거짓일 경우 뒤 연산자 출력

입력값까지 더하기

const readline = require('node:readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

let result = 0;
let to = 1000;

rl.question(`몇까지 더할까요?`, (name) => {
    for(i=1; i<(name+1);i++){
        result = result + i;
    }
    console.log(result);
});

형변환

const readline = require('node:readline');
const rl = readline.createInterface({
  input: process.stdin,
  output: process.stdout,
});

const prompt = require('prompt-sync')();

let result = 0;

const name = prompt('어디까지 더할까요?');
let to = parseInt(name);

for(i=1; i<(to+1); i++){
    result = result + i;
}

console.log(result);

간단한 4가지 질문으로 검사하는 mbti - if문

const prompt = require('prompt-sync')();

let mbti = "";

let ei = prompt("고등학교 때 유명했나요? (Y/N)");
let sn = prompt("스포츠(운동)를 하나요? (Y/N)");
let tf = prompt("수학을 잘하나요? (Y/N)");
let jp = prompt("지금 방이 깨끗하나요? (Y/N)");

if(ei == "Y"){
    mbti = mbti + "E"
}
else if(ei=="N") {
    mbti = mbti + "I"
}
else {
    console.log ("Y 또는 N를 입력해주세요")
}

if(sn== "Y"){
    mbti = mbti + "S"
} else if(sn=="N") {
    mbti = mbti + "N"
}
else {
    console.log ("Y 또는 N를 입력해주세요")
}

if(tf== "Y"){
    mbti = mbti + "T"
}
else if(tf=="N") {
    mbti = mbti + "F"
}
else {
    console.log ("Y 또는 N를 입력해주세요")
}

if(jp== "Y"){
    mbti = mbti + "J"
}
else if(jp=="N") {
    mbti = mbti + "P"
}
else {
    console.log ("Y 또는 N를 입력해주세요")
}
console.log("당신의 MBTI는 " + mbti + "아닌가요?");

함수

숫자값을 입력받아서, 1부터 해당 숫자까지 들어있는 숫자 배열을 만들고,
해당 배열의 모든 원소의 평균값을 리턴하는 함수

const calculateAverage = function(number){
    array = [];
    for(i=1; i<=number; i++){
        array.push(i);
    }
    sum = 0;

    for(i=0; i<number; i++){
        sum = sum + array[i];
    }
    //sum은 배열의 모든 요소가 더해진 상태

    let result = sum / number;
    return result;
}

console.log(calculateAverage(10));