[React] Text 입력 웹페이지 생성하기 #3 (css)
아래 단계에 따라 웹페이지를 구성하여 생성하고자 한다.
크게는 (1)화면을 구성하고, (2)화면을 구동하는 2가지 스텝으로 구성하고 각 스텝마다 세분화하였다.
본 포스팅은 (1)화면을 구성하는 스텝의 세번째 1.3단계에 해당된다.
1. 화면 구성
> 1.1 : Input Component 생성하기 (textarea, input)
> 1.2 : Option Component 생성하기 (option)
> 1.3 : CSS 적용하기
2. 화면 구동
1.1단계에서 페이지에 textarea 태그와 input 태그를 활용하여 값을 입력하는 부분을 구성하였고,
1.2단계에서는 option 태그를 활용하여 값을 목록에서 선택하여 입력할 수 있도록 구성하였다.
이번 1.3단계에서는 CSS를 활용하여 화면 구성을 눈에 보기 쉽도록 구성하고자 한다.
CSS란?
CSS는 HTML과 함께 웹을 구성하는 기본 프로그래밍 요소이며, HTML로 만들어진 콘텐츠에 레이아웃과 디자인요소를 정의하는 기술이다.
HTML로 텍스트나 이미지, 표와 같은 구성 요소를 웹 문서에 넣어 틀을 만들면, CSS로는 색상, 크기, 위치, 정렬, 배치 등 디자인 요소를 담당한다.
1.3 : CSS 적용하기
1. React 프로젝트 생성 ~ Input Component 생성 (이전 포스팅 참조)
▶ 아래 포스팅을 참조하여,
Create React App을 통해 React 프로젝트 생성 후 Input Component를 생성한다.
1.1단계 : Input Component 생성하기 (textarea, input) ->
https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-1-textarea-input
[React] Text 입력 웹페이지 생성하기 #1 (textarea, input)
아래 3단계에 따라 웹페이지를 구성하여 생성하고자 한다. 본 포스팅은 첫번째 A단계에 해당된다. - A단계 : Input Component 생성하기 (textarea, input) - B단계 : Option Component 생성하기 (option) - C단계 : CSS
break-time-for.tistory.com
2. Option Component 추가 (이전 포스팅 참조)
▶ 아래 포스팅을 참조하여,
Option Component를 추가한다.
1.2단계 : Option Component 생성하기 (option) ->
https://break-time-for.tistory.com/entry/React-Text-입력-웹페이지-생성하기-2-option
[React] Text 입력 웹페이지 생성하기 #2 (option)
아래 3단계에 따라 웹페이지를 구성하여 생성하고자 한다. 본 포스팅은 두번째 B단계에 해당된다. - A단계 : Input Component 생성하기 (textarea, input) https://break-time-for.tistory.com/entry/React-Text-입력-웹페
break-time-for.tistory.com
3. CSS 파일 수정
▶ 기존 [App.css] 파일은 Creat React App을 통해 생성된 파일이므로, 기존에 있는 내용은 모두 지워도 무방하다.
기존 내용을 모두 지우고 지금까지 생성한 Component에 대한 값으로 아래와 같이 수정이 필요하다.
.App {
}
.Input {
border: 1px solid gray;
text-align: center;
padding: 20px;
}
.Input input, textarea {
margin-bottom : 15px;
width : 450px;
}
.Input input {
padding : 10px;
height : 30px;
}
.Input textarea {
padding : 10px;
height : 150px;
}
.Input select {
width : 80px;
padding : 4px;
margin-bottom : 20px;
}
▶ 현재 [App.js]에서는 [Input.js] 내용을 불러오는 코드만 들어있으므로, [App.js]에 대해서는 css를 설정하지 않아도 된다.
그래서 요소가 구성되어 있는 [Input.js] 코드에 대하여 css 설정이 필요하다.
(1) INPUT > input
(2) TEXT AREA > textarea
(3) OPTION > select
위 그림과 같이 화면은 현재 3개의 요소로 구성되어 있다.
각각을 input, textarea, select로 구성하였으므로, 각각에 대해 css를 설정해준다.
▶ 요소 간의 공통으로 들어가는 css는 아래와 같이 콤마를 활용하여 함께 설정해줄 수 있다.
.Input input, textarea {
margin-bottom : 15px;
width : 450px;
}
4. 저장 및 조회
▶ 현재 포스팅으로는 요소를 수정한 건은 없으므로 별도 다른 파일은 수정하지 않고,
수정한 [App.css]만 저장한다.
▶ [App.css]을 저장하면 웹 브라우저는 자동으로 수정된다.
혹시 파일 저장을 해도 수정이 안 된다면, 웹 브라우저를 [새로고침]하면 된다.
아래 그림과 같이 기존 브라우저에 [App.css]에서 수정한대로 디자인이 변경되어 나오는 것을 볼 수 있다.
본 포스팅에서는 화면의 css를 설정하여 요소의 디자인적인 부분을 수정해보았다.
조금 더 다양한 Component와 css 요소를 통해 화면을 좀 더 다양하게 구성할 수 있다 !
1. 화면 구성
> 1.1 : Input Component 생성하기 (textarea, input)
> 1.2 : Option Component 생성하기 (option)
> 1.3 : CSS 적용하기
2. 화면 구동