간단한 css 실습하기 (1)

간단하게 html의 구조와 css 스타일링에 대해서 실습해보았다.

이번에 만들어 볼 페이지는 이러한 것이다.

이는 사진 및 텍스트를 가운데 배치하고, 리스트는 클릭하면 다른 사이트로 이동하게 만드는 것이다.

처음 구조를 이러한 식으로 잡는다

그 이후 타이틀과 사진이 들어갈 Div 와 안에 텍스트를 적어보자.

 

이렇게 대략적인 위치를 잡아준다. div로 콘텐츠를 넣어줄 공간을 만들어주자. 

그리고 중간에 ul>li*3 가 있는데, 이는 <ul> 태그 안에 <li> 태그를 3개를 만들어주는 명령어이다. 그래서 위에 나온 리스트를 만들어준다.

위의 예시처럼 사진을 넣어주고, 콘텐츠를 채워보자

이러한 식으로 <link> 태그안에 rel 속성값을 넣어준다. 이는 이 문서가 어떤 형식인지를 정해주는 것이며, href는 Hypertext Reference의 약자이며, 보통 파일을 연결해주거나, 웹 페이지나 리소스를 나타낸다. common.css를 연결해준 이유는 링크를 클릭했을 때 사이트가 나오는데, 홈페이지의 css에 공통적으로 들어가는 것이 있어 따로 css파일을 빼내어 만들었다. 

위에는 html 파일안에 style 요소로 해놨지만, 실제 프로젝트를 할때는 css는 따로 빼어 관리하는 것이 코드 가독성에 좋다.

 

 

저 위에 간단하게 html을 완성한 코드이다. body 요소안에 백 그라운드 사진을 넣고, div 태그에 border를 넣어 테두리의 두께 및 색상을 넣어주었다. 

 

이는 공통으로 들어갈 css인데 위에서부터 설명을 하겠다.

div에 width 를 넣은 이유는 width의 경우 아무런 값을 넣지 않았을 때, 부모요소에 최대 너비를 부여받는다. 그래서 아무런 값을 안넣을 때  width: auto 라는 값이 나오는데, 이것이 부모 요소에 최대 너비를 뜻한다.

여기에 height의 경우는 부모가 아닌 자식을 기준으로 자동조절이 된다. 그래서 조절을 하기 위해 width : 400px를 넣어두게 되었다. 그러면 부모요소는 예를 들면 1900px이라는 값이 나온다면 그 자식에 width를 지정해주면 부모는 그대로 이지만, 자식은 400px이라고 지정이 된다. 

그리고 다음에는 margin이 나오는데, margin이란 4면의 여백이라고 생각하면 되는데 margin, padding 등등의 값을 줄 때 순서가 있다. margin : 10px 20px 30px 40px; 이라는 값이 있다면, 이는 순서대로 위 10px 오른쪽 20px 아래 30px 왼쪽 40px 이라는 소리이다. 그래서 저기에 나오는 것은 위 아래 100px이고  auto의 경우는 가운데 정렬을 하는것인데 

원리가 이러하다 

위와 같이 margin-left를 했을 때, div를 맨 오른쪽으로 밀어버린다. 그리고 right의 경우는 왼쪽으로 밀어버린다. 이렇게 밀어서 생긴 공간을 가용공간이라고 한다.

 

그래서 auto를 했을 때 위와 같이 나오는데 이는 오른쪽 왼쪽을 동시에 margin을 하게되면 시스템상으로 동일 비율로 공간을 만들어준다고 한다.  그리고 3번째 줄인 padding의 경우는 margin은 바깥의 여백이라는 padding은 안쪽 여백을 뜻한다. 

그리고 border-radius은 div가 있다면 모서리의 기울기를 말하는데 동그랗게 만들어준다.

h1는 selector라고 칭하는데 이는 type selector라고 한다. 이 h1에게 text-align을 준 이유는 margin auto의 경우 부모 요소로부터의 중앙 정렬이기 때문에 안에 있는 컨텐츠들이 상속을 받지 않는다. 부모요소로부터 자식요소가 상속을 받지 않는 대표적인 속성들이 있다. 

display, margin, padding, border, width, height 등등이 있다. 이 때문에 h1 태그도 중앙정렬이 필요하기 때문에, text-align이라는 것을 해준다.

 

그리고 여기에 img에 width: 100%를 준 이유는 만약 div 태그가 이미지 크기보다 작게되면 어떻게 될 것인가? 라는 답이 될수 있다.

우리는 div에 width 400px을 주었는데, 사진의 크기가 가로의 넓이가 500px이다. 아래와 같이 div를 뚫고 나올 것이다.

 

그래서 width 100% 준 이유는 이는 width는 누구의 영향을 받는다고 했던가? 바로 부모 요소에 대해 영향을 받는다고 했다. 그래서 img는 div안에 있다. div는 400px이라고 되어있다. 그래서 img의 width를 100%를 하게 되면 div에 크기에 맞게 조절이 되어 div안에 들어가게 된다. 

 

위와 같이 사진이 div안에 잘 들어가게 된다. 

 

이렇게 간단하게 만들어보았는데, 이걸 하면서 부모와 자식의 종속이 어떤것이 되며, 어떤것이 안되는지를 알게 되었다. 그리고 중앙정렬할때의 margin: auto의 원리와 html의 구조를 알게 되었다.

부모요소, 자식요소, 형제요소, 태그, 속성(property), 속성(artribute), 셀렉터 등등을 알게 되었다. 처음 html, css를 배웠을 때 이러한 상세 개념을 모르는 상태로 그냥 작성을 했었다. 그래서 이게 왜 이렇게 늘어나고, 어디에 들어가고 하는 것을 몰랐다. 하지만 이번 실습을 해보면서 몸소 깨우치게 되었다.