FE/CSS9 [CSS] 플렉스(Flex) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. CSS에서 레이아웃을 배치하는데 사용되는 대표적인 개념은Flex와 Grid이다. 두 개념의 가장 큰 차이점은 1차원(Flex)이냐 2차원(Grid)이냐이다.Flex는 행 또는 열이 하나의 축이 되어 축을 기준으로 배치되고,Grid는 행과 열을 동시에 바둑판 처럼 배치한다. 이번 게시물에서는 플렉스(Flex)의 개념에 대해 알아보자. 1. Flex의 구성먼저 Flex개념을 이해하기 위해서는 Flex가 어떻게 구성되는지 알아야 한다.Flex는 Flex Container와 Flex Item으로 구성된다. 플렉스 컨테이너(Flex Container) : 자식 요소들을 정렬하기 위한 부모 요소이다.플렉스 아이템(Flex Item) : 플.. 2024. 6. 20. [CSS] 유동속성(float) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 속성값으로 left, right, none, inherit가 있다.inherit는 많이 사용하지 않기 때문에 inherit를 제외하고 살펴보자. 말로 하면 이해가 어려울 수 있고 예제로 보면 쉽기 때문에이번 게시물에서는 예제를 중심으로 설명할 예정이다. right/leftright와 left의 차이는 오른쪽에 띄우느냐, 왼쪽에 띄우느냐의 차이이다.img { float: right;} nonenone은 이미지가 텍스트의 한 줄을 차지한다. default값이다.img { float: none;}float속성은 이렇게 이미지를 배치할 때도 많이 쓰지만최근에는 태그나 리스트에서 자주 사용한다. 왜냐하면, div태그는 따로 설정해주지.. 2024. 6. 18. [CSS] 위치 속성 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 지금까지 요소의 크기 조절이나 정렬, 스타일 변경 등에 대해서 배웠는데웹 페이지에서 요소의 위치를 지정하는 법을 배우지 않았다. 그래서 이번에는 위치 속성에 대해 알아보자 1. 절대 위치와 상대 위치절대 위치웹 페이지를 기준으로 정확히 어느 위치에 위치하는지를 의미한다. 상대 위치모든 요소는 원래 자신의 위치를 가지고 있는데, 이 위치를 기준으로 어느 곳에 위치하는지를 의미한다. 2. position 속성static, absolute, fixed, relative, sticky의 값을 가질 수 있다.여기서 static, relative는 상대위치이고 absolute, fixed는 절대위치이다. sticky는 상대/절대 혼합이다... 2024. 6. 15. [CSS] 배경(Backgrounds) 속성 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 배경(Backgrounds) 속성은 웹사이트 전체나 요소의 배경을 설정할 수 있는 속성이다.그냥 흰 배경을 그대로 두면 깔끔하긴 하지만 가끔 심심하기도 하다. 이럴 때 배경 이미지를 넣어서 예쁘게 꾸며 볼 수 있다.배경과 관련된 속성을 알아보자. 여기서 헷갈릴 수 있는 점은 배경 속성이라고 해서 무조건 웹사이트 전체에 들어가는 것은 아니다.꼭 웹사이트가 아니더라도, 태그나 태그 등 다양한 태그에서도 사용할 수 있다. body태그에 background속성을 적용하면 웹페이지 전체에 배경이 적용되고,span태그를 이용해서 특정 텍스트에만 배경을 적용할 수도 있다.1. background-color배경의 색상을 지정할 수 있다. 속성.. 2024. 6. 13. [CSS] 가시속성 (display) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 가끔 우리는 요소를 만들지만 눈에 보이지 않게 하고 싶을 때가 있다.예를 들면, 잘못된 입력값을 입력했을 때 x표를 띄우게 하고싶다고 하자.이미 존재는 하지만 입력값이 잘못되지 않았다면 x표를 보이지 않게 하면 된다. 이 때, 가시속성을 사용할 수 있는데CSS에서는 이를 display속성을 이용하여 설정할 수 있다. display속성태그가 화면에서 어떻게 보일지를 지정한다.속성값으로 none, block, inline, inline-block 등을 가질 수 있다. none화면에 보이지 않으며 공간도 차지하지 않는다. 하지만 DOM에는 남아 있는 상태이다.공간을 차지하지 않는다는 점에서 visibility:hidden;과 차이를 .. 2024. 6. 13. [CSS] 글자 속성 (text, font) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 저번 게시물에서는 CSS의 박스 속성에 대해서 알아보았다.이번에는 글자 속성에 대해 알아보도록 하자. 글자 속성도 엄청나게 많다.글자와 관련된 속성들은 color를 제외하고 대부분 text와 font로 시작한다.text로 시작되는 속성을 먼저 알아보고, font로 시작하는 속성을 알아보자. 1. 텍스트 색상color 속성글자의 색상을 지정한다.속성 값으로 red와 같이 색상명도 가능하고, HEX, RGB 표현식도 가능하다. background-color 속성글자의 배경 색을 지정한다. 형광펜과 비슷하다.속성 값은 color 속성과 동일하다.h1 { background-color: black; color: white;} 2. .. 2024. 6. 13. [CSS] 박스 속성 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. HTML에서 생성한 블럭 요소들은 각자 고유한 사각형 영역을 가진다.이 사각형 요소들에게 적절한 스타일을 적용하면원하는 형태로 웹페이지를 구성할 수 있다. 이 때 개인적인 Tip을 하나 주면,CSS로 화면을 구성할 때 각 요소에 red, blue등 눈에 잘 띄는 색으로테두리 선을 그어주고 작업을 하면 화면을 구성하기 쉬워진다. 그러면 박스를 이용해 화면에 구성하기 위해서 필요한다양한 속성을 알아보자. 1. 크기width와 heightwidth 속성은 Content의 가로 길이를 의미하고, height 속성은 Content의 세로 길이를 의미한다.속성 값은 px, cm, %등의 단위나 auto, initial, inherit등이.. 2024. 6. 13. [CSS] 선택자 *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. 이전 게시물에서 언급했듯이, CSS를 공부하기 위해서 가장 먼저 공부해야 할 것은CSS를 적용하기 위해서 요소를 선택하는 방법이다. 이 때 사용하는 것을 선택자라고 한다.선택자에는 태그 선택자, 아이디 선택자, 클래스 선택자, 속성 선택자 등이 외에도 엄청나게 많은 선택자가 존재한다. 하지만 이를 다 외우기에는 힘들고주로 사용하는 선택자는 한정되어 있다. 오늘은 그 중에서 정말 중요한 선택자만 공부해 보자. 1. 기본 선택자기본 선택자는 태그 선택자, 아이디 선택자, 클래스 선택자, 전체 선택자로 나눌 수 있다.기본 선택자만 알아둬도 크게 문제는 없다. - 태그 선택자 : 태그를 선택한다. 예를 들어 h1태그를 가진 모든 요소를.. 2024. 6. 13. [CSS]기본 사용법(Tutorial) *작성자는 공부 중인 학생으로 잘못 된 정보가 있을 수 있음을 알려드립니다. CSS(Cascade Style Sheet)는 웹 사이트의 스타일을 정의하는 언어이다. 프론트 개발을 공부하다 보면 생각보다 css가 쉬운데 싶다가도직접 개발을 해보면 css에서 제일 많이 막힌다. 내가 생각했던 것 처럼 움직이지도 않고내가 생각하지 않았던대로 움직이기도 한다.오늘도 웹 페이지에 CSS를 적용하다가 키보드를 몇번 내려칠뻔 하기도 했다. CSS의 기본적인 동작은 다음과 같다.(1) 스타일을 적용할 HTML 문서의 요소를 선택(2) 적용할 스타일 정의 이 두 단계로 웹 페이지에 스타일을 적용할 수 있다. 1. CSS의 기본 구조h1 { color : black; border : 1px solid red;} 위 예.. 2024. 6. 12. 이전 1 다음
