![Featured image for [CSS] Positioning, Flexbox](https://tired-i.com/wp-content/uploads/2026/01/css-positioning-image.png)
1. Positioning 가. position Position 옵션 설명 static (default) Position의 기본값. 상위 요소나 다른 요소에 영향을 받지 않고 문서의 흐름에 따라 위치가 결정됩니다. relative 일반적인 문서 흐름에 따라 배치하고, 조상 요소를 기준으로 top, right, bottom, left의 값으로 위치를 조정. absolute 가장 가까운 위치 지정 조상 요소(position 값이 static이 아닌 요소)에 대해 상대적으로 위치를 결정하며, 위치 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 flex 잘 정리해둔 글이 있어서 링크를 남긴다. 추가로 flex에 이어서 grid에 대한 설명도 있으니 필요하면 찾아서 사용하자. 지금 당장 알아야 할 것은… flex-direction으로 배치의 방향(가로축 row, 세로축 column)을 선택한다는 사실. 선택한 축 방향으로 정렬하고 싶으면 프로퍼티로 justify-content:를 사용한다. 선택한 축의 수직 방향으로 정렬하고 싶으면 프로퍼티로 align-items:를 사용한다. 이 정도 알면 필요한 기능을 … 더 읽기
참고 자료 : https://www.youtube.com/watch?v=67stn7Pu7s4 CSS Pseudo-classes 가상 클래스, 의사 클래스로 번역되어 사용되고 있다. A CSS pseudo-class is a keyword added to a selector that specifies a special state of the selected element(s). 선택자 뒤에 :가상이벤트를 붙이면 특정 이벤트마다 적용할 스타일을 설정할 수 있다. 위는 대표적인 가상 클래스의 예시다. 미리 정의되어 있는 가상 클래스를 효과적으로 사용하면 편하다. … 더 읽기
반응형 디자인 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 반응형 웹 PC든 스마트폰이든 태블릿이든 웹에 접속할 수 있는 하드웨어가 다양해졌다. 그렇기에 웹은 다양한 사이즈와 비율을 가진 하드웨어에 대응하는 웹 페이지를 만들어야 했다. 그런 맥락에서 탄생한 것이 바로 반응형 웹 디자인이다. 반응형 웹 디자인(responsive web)이란 화면 크기에 따라 웹 페이지의 각 요소들이 반응해서 … 더 읽기
박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 박스 모델 적용 위의 이미지와 같이 칸으로 나눠진 웹 페이지를 만들어 보자. 가로줄을 긋기 가로줄을 긋는다. 덤으로 h1 태그의 글자 크기와 정렬 위치를 변경한다. 개발자 도구를 이용해서 h1 태그의 디테일을 수정한다. (우클릭→ ‘검사’ 클릭) margin을 없애고 padding 20px을 추가한다. 세로줄 긋기 ul 태그는 block … 더 읽기
박스모델 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. 박스 모델이란? 박스 모델이란 개념이 있다. 직관적으로 이해하기 위해서 구글에 검색해 이미지를 살펴보자. 구글에 박스 모델이라고 검색하면 아래와 같은 결과를 얻을 수 있다. 박스 모델에 대한 사전적 정의를 찾아보면 아래와 같은 대답을 얻을 수 있다. In CSS, the term “box model” is used … 더 읽기
CSS 속성을 스스로 알아내는 방법 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. 1. Property 프로퍼티란 CSS에서 적용할 효과의 종류를 뜻하는 용어다. 모든 프로퍼티를 외워서 사용하기는 어렵고 비효율적이니깐 검색해서 사용하는 법을 배워야 한다. 검색창에 “css ??? property”라고 입력하면 대부분 적절한 프로퍼티를 추천해 줄 것이다. 가. 예시 : 글자 크기 구글에 “css text size … 더 읽기
CSS 등장 이전의 상황 – 생활코딩 이 글은 이고잉님의 오픈튜토리얼 강의를 듣고 정리한 내용입니다. CSS 소개 CSS(Cascading Style Sheets, CSS)는 마크업 언어가 실제 표시되는 방법을 기술하는 스타일 언어(style sheet language)다. HTML 구조는 그대로 두고 CSS 파일만 변경해도 전혀 다른 웹사이트처럼 꾸밀 수 있다. W3C의 표준이며, 레이아웃과 스타일을 정의할 때의 자유도가 높다. 기본 파일명 style.css이다. 출처 … 더 읽기
