rokupuku_1019.log https://velog.io/ FE 개발자 지망생 Tue, 27 May 2025 14:50:05 GMT https://validator.w3.org/feed/docs/rss2.html https://github.com/jpmonette/feed rokupuku_1019.log https://velog.velcdn.com/images/rokupuku_1019/profile/af3694b8-8479-47f2-abbc-b0b6d3998c22/social_profile.jpeg https://velog.io/ Copyright (C) 2019. rokupuku_1019.log. All rights reserved. <![CDATA[📌CSS에 대하여..(1)]]> https://velog.io/@rokupuku_1019/CSS%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC..1 https://velog.io/@rokupuku_1019/CSS%EC%97%90-%EB%8C%80%ED%95%98%EC%97%AC..1 Tue, 27 May 2025 14:50:05 GMT

Cascading Style Sheets

지난 시간에 이어서 CSS에 대한 얘기를 해보려고 한다.

CSS는 웹을 디자인 해주는 '디자인 언어'로 사용자에게 시각적인 즐거움을 줄 수 있게 하는 도구다.

웹을 디자인할 때, 요소들의 색, 모양들도 중요하지만 제일 중요한 것은 웹의 '레이아웃' 이라고 생각한다.

디자인에 대해 배우기에 앞서, 웹 요소들을 배치하기 위한 레이아웃 모델에 대해서 배워보자.

Flexbox(Flexible Box)

✏️ 개념

  • Flex는 1차원 레이아웃 시스템으로 요소들을 가로 또는 세로 한 방향으로만 정렬함
  • 주로 행 또는 열 단위의 정렬에 적합

📝 구성

  • display: flex; (주로 사용)
  • inline-flex;

🔑 주요 속성

  • flex: 자식 요소 크기 비율 설정
  • flex-direction: 주축 방향 설정 (row(기본값), column 등)
  • justify-content: 주축 정렬 (center, space-between 등)
  • align-items: 교차축 정렬 (center, stretch 등)
  • flex-wrap: 요소 줄바꿈 여부 (기본적으로 nowrap 상태)

▶️ 예시

.container {                      //'container'라는 클래스를 가진 요소에 디자인
  display: flex;                  //flexbox 컨테이너로 설정
  flex-direction: row;               //주축 방향을 가로로 설정
  justify-content: space-between; //주축(가로) 방향으로 양끝 정렬 후 균등 간격 주기
  align-items: center;            //교차축(세로) 방향 중앙 정렬 
  flex-wrap: wrap;                  //요소들의 총 넓이가 부모 넓이 보다 클 때, 다음 줄에 이어서 정렬
}

Grid

✏️ 개념

  • Grid는 2차원 레이아웃 시스템으로 요소들을 행과 열 모두로 정렬 가능
  • 복잡한 레이아웃 구성에 적합

📝 구성

  • display: grid; (주로 사용)
  • inline-grid;

🔑 주요 속성

  • grid-template-columns, grid-template-rows: 열과 행 정의
  • grid-column, grid-row: 자식 요소의 위치 지정
  • gap: 행과 열 사이 간격 설정

▶️ 예시

.container {                        //'container'라는 클래스를 가진 요소에 디자인
  display: grid;                    //grid 컨테이너로 설정
  grid-template-columns: 1fr 2fr;    //두 개의 열을 정의하고, 첫번째 열보다 두번쨰 열을 2배 더 넓게 설정
  grid-template-rows: auto auto;    //각각의 행 높이는 요소의 높이에 맞게 자동 조정
  gap: 10px;                        //행과 열 사이의 간격 설정
}

마무리..

내용이 많지는 않지만 감을 잡기에는 괜찮다고 생각합니다. 몇편까지 할지는 모르겠지만... CSS는 양이 많은지라 ㅎㅎ... 다들 괜찮으셨다면 좋아요 팔로우 부탁드립니다^^~

]]> <![CDATA[📌간단한 HTML, CSS 소개]]> https://velog.io/@rokupuku_1019/%EA%B0%84%EB%8B%A8%ED%95%9C-HTML-CSS-%EC%86%8C%EA%B0%9C https://velog.io/@rokupuku_1019/%EA%B0%84%EB%8B%A8%ED%95%9C-HTML-CSS-%EC%86%8C%EA%B0%9C Tue, 20 May 2025 12:02:23 GMT

HyperText Mark-up Language

우리가 흔히 보는 웹사이트의 모습을 보여주기 위해 사용되는 마크업 언어이다.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
    </head>
    <body>
        <p>Hello, artists!</p>
    </body>
</html>

HTML 코드의 기본 형식은 이런 형태로 이루어져 있으며, 크게 head 태그와 body 태그로 나뉘어져 있다.

🧠 head 태그

보통 head 태그 안에는

  • 사이트 제목 (title)
  • 문자 인코딩 방식 (meta charset)
  • 인라인 CSS 정의 (style)
  • 외부 파일 연결 (link)

으로 이루어져 있고, 코드는

    <head>
        <meta charset="utf-8">
        <title>간단한 HTML 소개</title>
        <link rel="stylesheet" href="style.css">
        <style>

            (페이지 꾸미는 코드....)

        </style>
    </head>

위와 같이 구성되어진다. head 태그 영역은 페이지 자체에 대한 정보를 담는 영역이며, 말 그대로 문서 자체의 'head' 인 만큼 중요한 역할을 한다.

💪 body 태그

보통 body 태그 안에는

  • 텍스트 (p)
  • 이미지 (img)
  • 링크 (a href)
  • 레이아웃 컨테이너 (div)
  • 버튼 (button)
  • 스크립트 (script)

으로 이루어져 있고, 코드는

    <body>
        <p>Hello, world!</p>
        <img src="image.jpg" alt="예시 이미지">
          <a href="https://example.com">test</a>
        <div></div>
        <button>버튼1</button>
        <script src="test.js"></script>
    </body>

같이 구성된다. body 태그 영역은 웹사이트 화면에 실제로 보이는 모든 요소를 담는 영역이며, 페이지의 'body' 역할을 한다.

Cascading Style Sheets

웹사이트의 스타일을 지정하기 위한 디자인 언어이다.

CSS의 역할은 웹의 '옷' 역할을 한다고 생각하면 편하다.

옷을 입지 않으면, 멋을 내기 힘든 것처럼 웹은 CSS 없이 HTML만으로 웹을 구성하기엔 많이 부족하다.

CSS는 이러한 역할들을 한다.

  • 색상 지정
  • 글꼴 스타일
  • 레이아웃
  • 반응형 디자인
  • 애니메이션

그리고 작성 방식에도 차이가 있다.

  • 인라인 스타일 (HTML 태그 안에 직접 작성)
  • 내부 스타일시트 (style 태그 안에 작성
  • 외부 스타일시트 (css 파일과 연결)

이렇게 나뉘지만, 대부분은 외부 CSS 파일을 따로 분리하여 작성한 뒤 연결한다. 이유는 유지보수가 편리하고, 문서 내 코드 가독성을 방해하지 않기 때문이다.

선택자 {
  속성: 값;
  속성: 값;
}

이런 방식으로 코드가 작성된다. 코드 속 선택자는 어떤 HTML 요소(h1, .class, #id)에 스타일을 적용할지 지정하며, 속성은 적용할 스타일 종류 (color, font-size, margin, padding) 작성하며, 값은 속성의 값 (blue, 30px, center)을 입력하여 요소를 디자인한다.

만약에 h1 태그에 파란색을 입히고, 글씨 크기는 30px, 가운데 정렬을 하고 싶다면..

h1 {
  color: blue;
  font-size: 30px;
  text-align: center;
}

이런식으로 코드를 작성하면 된다.

마무리..

CSS는 다룰 내용이 상당히 많으니 다음 시간에 자세히 다뤄보도록 하겠습니다~~!! 다들 좋아요, 댓글, 팔로우 부탁드립니다 ㅎㅎ

]]> <![CDATA[💻프론트, 백, 서버, API]]> https://velog.io/@rokupuku_1019/%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B1-%EC%84%9C%EB%B2%84-API https://velog.io/@rokupuku_1019/%ED%94%84%EB%A1%A0%ED%8A%B8-%EB%B0%B1-%EC%84%9C%EB%B2%84-API Tue, 13 May 2025 11:43:23 GMT

프론트, 백, 서버, API가 도대체 뭐야?

내가 프론트에 처음 접하고 나서, 뭐가 뭔지 헷갈렸었던 적이 있다.

다들 살아가면서 WEB을 사용해보지 않은 사람이 한 명도 없을 것이다. 하지만 우리는 정작 그 WEB이 어떻게 작동하는 지에 대해 잘 모른다.

그래서 이번에는 우리가 그 웹에 들어가서 클라이언트가 상호 작용할 때, 어떠한 원리로 어디에 전달되어 최종적으로 클라이언트가 원하던 데이터가 출력되는 지에 대해 간단히 정리해보는 시간을 가지려고 한다.

일상 비유로 설명하자면...

손님(프론트)이 햄버거 가게에 와서 "치즈버거 하나요!" 라고 말하면,

종업원(서버)이 그 말을 듣고 주방(백엔드)에 주문서(API) 를 전달,

주방(백엔드)은 주문서(API)에 따라 치즈버거를 만들고,

종업원(서버)이 만든 햄버거를 다시 손님(프론트)에게 갖다줌.

이정도로 이해하면 쉬울 것 같다. 다음은 각 분야에 대한 간단한 설명이다.

프론트(손님👱)

클라이언트에게 보여지는 부분

'프론트엔드(Front-end)'는 클라이언트에게 가장 먼저 보여지는 부분으로, 클라이언트와의 상호 작용은 여기서 이루어짐.

정보를 입력하거나, 버튼 같은 것을 클릭하게 되면 서버로 API 형식으로 요청이 보내짐.

서버에게 결과를 반환 받은 프론트는 클라이언트에게 화면에 결과를 출력함.

서버(종업원🤵)

요청을 받아 처리해주는 컴퓨터

'서버(Server)'는 클라이언트의 요청을 받고, 그에 맞는 정보를 보관·처리하거나 데이터를 전달하는 컴퓨터 또는 프로그램.

WEB의 중간 관리자 역할을 함.

서버는 요청 받은 것을 백엔드에 전달함.

백에게 반환받은 결과는 프론트에 'JSON' 이라는 형식으로 전달함.

백(주방👩‍🍳)

눈에 보여지지 않는 계산·처리 담당

'백엔드(Back-end)'는 눈에 안 보이는 '두뇌' 같은 부분으로, 데이터 저장·처리·계산·응답을 담당함.

백은 API에 따라 DB에서 정보를 찾고 결과를 서버에 다시 반환해줌.

API(주문서📋)

프론트와 백이 대화하는 약속된 "언어"

프론트와 백엔드가 서로 대화할 수 있게 해주는 약속된 "문법"이자 "통신 수단"임.

프론트와 백을 연결하는 유일한 통신 수단으로, 앱 간의 연결도 API로 함.

마무리

위 내용을 보고 도움이 되었다면 좋아요, 댓글, 팔로우 부탁드릴게요 ^^~

]]> <![CDATA[시작을 여는 글]]> https://velog.io/@rokupuku_1019/%EC%8B%9C%EC%9E%91%EC%9D%84-%EC%97%AC%EB%8A%94-%EA%B8%80 https://velog.io/@rokupuku_1019/%EC%8B%9C%EC%9E%91%EC%9D%84-%EC%97%AC%EB%8A%94-%EA%B8%80 Tue, 06 May 2025 11:34:10 GMT 📌시나브로란?

모르는 사이에 조금씩 조금씩

시나브로는 "모르는 사이에 조금씩 조금씩"이라는 뜻을 가진 순우리말이다. 지금 내 상태를 정확히 비유하는 말이라고 생각한다. 아님말고 나는 이번 3월을 시작으로 스스로 다짐하게 된 것이 있다.

'지금까지 너무 나태하게 살지 않았나?' '나는 미래에 뭐하고 먹고 살지?' 등등...

많은 생각들이 들게 되어, 변화하고자 열심히 살기로 다짐했다!

그래서 이번 1학기 목표는 다음과 같다.

  1. 💻교내 IT 동아리 가입 후, 활발히 활동하기
  2. ✍교외 활동을 진행하여 경험 쌓기
  3. 📚남는 시간 활용하여 전공 지식 습득하기

와 같은 목표를 설정했다.

그래서 현재 1번과 3번은 스스로 생각하기에 순항중이라고 생각하고, 2번도 이번 UI/UX 디자인 교수님과 같이 협업하여 진행하는 프로젝트에 참가하게 되었다. 하지만 이번 프로젝트에서 진행하는 내용은 내가 지향하는 방향과 조금 다르지만 그래도 좋은 경험이라고 생각해서 열심히 준비하고 있다.

올해 목표는

HTML, CSS, JAVASCRIPT, REACT, TYPESCRIPT, NEXTJS etc..

같은 언어들을 전부 습득하면 좋겠지만~.... 현실적으로 내 학습능력을 생각하면 어려울 것이라 생각해 JS와 REACT를 중심으로 공부할 예정이다. 물론 이마저도 쉽지 않겠지만 최대한 공부해서, 계획을 수립했던 순간을 되새기며 노력할 것이다.

차근차근 목표했던 것들을 이루어가다보면 언젠간 목표에 다다를 수 있을 것이라고 생각한다!!!

마지막으로..

좋은 순간이든 안 좋았던 순간이든 다 경험치다

라고 생각하며 마치겠습니다. 다음에 또 봐요 ^^~

]]>