분류 전체보기131 CSS_Holy Grail Layout 오늘은 Holy Grail Layout에 대해 알아보도록 할게요. 우선 Holy Grail Layout이란 무엇일까요? 레이아웃의 기본적인 틀을 의미합니다. 그렇다면 어떻게 생겼는지 보도록 하겠습니다. 이렇게 생긴 웹 페이지의 형태를 의미합니다. 그럼 이제 코딩을 해보도록 하겠습니다. 이렇게 화면이 나오게됩니다~ 감사합니다!ㅎㅎ 2017. 3. 13. CSS_Flex2 오늘은 Flex두번째 시간입니다. 오늘은 자식(item)의 속성을 알아보도록 하겠습니다. 지난번과 같은 코드입니다. 추가된 것은 style속성에서 .item:nth-child(2) 라는 속성인데 이것은 아래 제가 주석을 달아놓은것 같이 자식 div에서 2번째의 속성을 의미합니다. 아래 그림 보도록 하겠습니다. 보시는 바와같이 결과화면이 이렇게 출력이 됩니다. 다음은 flex-direction이 row일때의 화면입니다. 결과화면은 위의 그림과 같습니다. 따라서 flex-basis 라는 속성은 flex-direction이 어떤값이냐에 따라 height가 될 수도 있고 width 값이 될 수도 있습니다. 다음은 flex-grow속성에 대해서 알아보도록 하겠습니다. 쉽게말해서 flex-grow는 전체를 1/N(.. 2017. 3. 13. CSS_Flex(1) 오늘은 CSS에서 Flex에 대해서 포스팅해보겠습니다!! Flex는 Layout을 잡을 때 사용하는 것입니다. Flex를 사용하기 위해서 문법은 이렇게 부모와 자식간의 태그가 필요하답니다! 태그이름이 container와 item이 아니라 부모자식간의 관계를 나타낸 것입니다. 먼저 Container 속성에 해당하는 것들을 알아보도록 하겠습니다. display flex-direction flex-wrap flex-flow justify-content align-items align-content 이렇게 7가지가 있습니다. 다음 의 속성을 알아보겠습니다. order flex-grow flex-shrink flex-basis flex align-self 이렇게 6가지가 있습니다. 이제 이러한것들을 더 자세하게 .. 2017. 3. 13. CSS_Span 오늘은 Span 태그에 대해서 포스팅 하겠습니다. 저번시간에 div태그에 대해서 알아보았는데요. 는 우선 텍스트에서 효과를 주기 위해 사용되는 태그입니다. span은 div와 다르게 줄바꿈 속성이 들어 있지 않습니다. 위 그림과 같이 코딩을 하였을때 다른점을 찾을 수 있습니다. div영역은 한 줄 전체를 사용하게되고 span태그는 내용이 쓰여진 부분만을 유동적으로 사용하게 됩니다. 그렇다면 길게 써보도록 하겠습니다. 이제 span과 div의 차이점을 조금이나마 이해하시겠나요?? 감사합니다^^ 2017. 3. 12. 이전 1 ··· 23 24 25 26 27 28 29 ··· 33 다음
