개발자의 개발 블로그

class App extends Component {

  render() {

    return (

      <div className="body">

        <Login />

    );

  }

}

이렇게 있는데, 가로 100%, 세로 100%로 크기를 지정하고 싶다면,

쉽게 생각하면

가로 width : 100%

세로 height : 100%

로 하면 될 것 같다. 하지만, 가로는 적용되지만, 세로는 적용되지 않는다.

위에 사진의 경우 아랫쪽 배경이 흰색이라 보이지 않지만, 로그인 폼 부분의 높이만 aqua색이 적용된 것이다.

그렇다면, 어떻게 높이를 전부 바꿀 수 있을까?

HTML이라면, body를 바꾸면 되지만, React에서는 다른 방법이 존재한다.

바로, 단위를 % 말고, 다른 것으로 하면 된다.

여기서 답을 찾았다.

https://webdesign.tutsplus.com/ko/articles/7-css-units-you-might-not-know-about--cms-22573

바로 vh와 vw 단위를 사용하면, 너비값과 높이값을 부모 요소에 맞게 사용할 수 있다. 

vh 요소는 높이값의 100분의 1의 단위입니다. 

예를 들어 브라우저 높이값이 900px일때 1vh는 9px이라는 뜻이다. 즉, 100vh는 브라우저 높이의 전체이다.

이와 유사하게 뷰포트의 너비값이 750px이면 1vw는 7.5px이 됩니다. 따라서, 100vh는 브라우저 너비 전체이다.

즉, 최대 높이값이를 제작할때 100vh로 사용하면 된다.

height를 px등으로 지정하는 것과 달리, 브라우저의 높이가 줄어들거나 늘어나도

vh단위는 1/100 이므로 100vh 설정을 했기 때문에 항상 전체 높이를 잡을 수 있다.

웹 어플리케이션 서비스를 옛날에 시청했는데

HTML CSS를 안 쓰다가, 다시 쓰려니 기억이 안나서 다시 들어가봤습니다.

생활코딩 많이 바뀌었더라구요.. 복잡해지고 무슨 코딩야학?? 이게 뭥미.

어쨋거나 다시 HTML을 시작해봅시다.

https://opentutorials.org/course/3083

코딩

웹

인터넷

컴퓨터

에 대해  배운다니 멋지고 거창하군요.

HTML = 쉽고, 중요하다, 퍼블릭 도메인이다.

퍼블릭 도메인이란, 저작권이 없는 100% 무료인 것들을 말한다.

HTML 코딩 실습 환경 준비

1. 웹 브라우저

2. 웹 에디터

태그(Tag)

<strong>강조할 내용</strong> : 텍스트 일부를 강조하기 위해 사용하는 태그

<u>밑줄</u> : 밑줄을 귿는 태그

<h1>제목</h1>: 제목. 

<h1>부터 <h6>까지 존재하며 숫자가 커질수록, 폰트 사이즈는 작아짐.

<br> : 새로운 줄로 개행할 수 있다. 하지만, 

<p> 테그 역시 새로운 줄로 개행된다.

둘의 차이점은

<br>은 단순한 줄을 바꾸는 용도로 사용되지만,

<p>는 단락을 구분해주기 때문에 의미론적으로 더욱 중요한 태그이다.

물론 <br>은 여러번 쓰면 원하는 만큼 띄울 수 있기만, <p>는 정해진 간격만큼만 띄울 수 있다.

이것은 css를 통해 커버할 수 있다. margin-top: 30px; 이런식으로 마진을 쓰면 되기 때문이다.

<ul>

<li></li>

<ul>

<ol>

<li></li>

<ol>

속성(Attribute)

<img src="logo.jpg" width="100%"  >

src와 width가 속성이다. 순서는 상관없다. 시작 태그 안에 작성한다.

마진을 위 아래 좌 우 각각 설정할수도 있지만, 

마진(margin)으로 네 영역을 모두 동일하게 지정할 수 있다.

margin : "10px 20px 30px 40px"와 같이 쓰면 된다.

맨 처음 값이 상단(위), 다음값이 우측, 세번째 값이 하단, 네번째 값이 좌측이다. 

방향으로 네 값이 돌아간다.

그런데, 반복되는 값이라면 줄여서 "10px 20px" 이라고도 사용이 가능하다.

"10px 20px" 은 "10px 20px 10px 20px" 과 같은 말이다.

동일한 값으로 4번 반복된다면 "10px" 하나만 쓰면 된다.

즉, "0 auto" 는 상단과 하단은 여백을 주지 말고, 

좌측과 우측의 여백을 자동으로(auto) 주라는 것임을 알 수 있다.

이렇게하면, 왼쪽 마진을 오른쪽 마진을 자동으로 나눠서 균등하게 갖게 된다. 

이렇게, 가운데 정렬이 된다.

margin : "0 auto"; 이렇게 작성하면 되지만, 이상하다면 그냥 풀어서... 

margin-left : auto;

margin-right: auto;

이렇게 작성해줘도 된다. 아니 원래 이렇게 해야 정상이다. 

또한, 이것을 사용하려면 당연하지만, 너비가 존재해야 한다.

너비가 있어야 좌 우를 auto로 맞춰서 가운데 정렬이 될 것 아닌가?

너비를 주지 않으면 당연히 가운데 정렬이 적용되지 않는다.