1. 학습내용

예제로 '카페'를 주제로 사이트를 만들어 보았다. CSS 작성 중, 처음 배워보는 것들만 적으려 한다.

p{
   font-size: 1.3em;
   line-height: 2.5;
}
/* em -> M, 1em == 16px*/
/*배수로 적은것. 위의 font-size가 em으로 되어 있으면 그것의 두배란 의미*/

line-height를 px로 적지 않고, 그냥 수치만 적는 경우가 있는데, 그런 경우는 font 크기보다 몇 배라는 의미였다.

/*a태그 속성:link(방문전) visited(방문후), hover(마우스오버), active(클릭 중) <-이 순서로 적어야 적용*/

nav a:link,
nav a:visited,
#top a:link,
#top a:visited{ 
   color: rgb(255, 253, 253);
}
a{
   display: block;
}
nav a:hover{
   color: #d4f7e5;
}

nav a:active{
   color: red;
}

위의 주석대로 태그에 여러 액션마다 스타일을 다르게 주고 싶다면, 순서를 지켜서 쓰지 않으면 스타일이 적용되지 않는다.

2. 어려웠던 점 및 해결방안.

#choice .content{
   flex-direction: row-reverse;
}

div공간 안의 콘텐츠 순서를 반대로 하고 싶다면, 물론 html순서를 다르게 적어주어도 된다.
그런데 그렇게 하려면, 스타일 시트를 따로 적어주거나 같은 클래스 명을 주기 어려워 진다.
단순 배열만 반대로 하고 싶고, flex로 가로 정렬을 했다면, 위의 코드처럼 방향을 반대로 하는
'row-reverse'를 하면 된다.

3. 학습소감.

주제를 정해서 간단하지만 홈페이지를 하나 만들어 보는 시간을 가졌다.
더 다양한 주제로 만들 앞으로의 수업이 기대가 된다. 또 자세하게는 새로운 스타일을 알아갈 수 있어서 좋은경험이 되었다.