Web/CSS19 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. CSS_div태그 오늘은 div 태그에 대해서 포스팅할게요! 우선 태그란 단락이나 구역을 나눌때 사용하는 태그입니다! 바로 사용해 보도록 하겠습니다. div태그로 단락을 묶어주면 영역이 정해집니다. style에서는 div의 테두리를 파란색으로 1px굵기의 선으로 묶고 패팅과 마진값을 부여하였습니다. 결과화면은 아래와 같게 나오게됩니다. 이해를 더 돕기 위해서 색깔로 구분을 한번 해보도록 하겠습니다. div태그의 속성은 다음줄로 넘기는 속성이 있습니다. 이렇게 코딩을 하면 어떤 결과가 나올까요? 각 구역의 값을 30%로 3개를 넣으면 한줄에 코딩이 되어야 하지 않을까요...? 결과는 다음과 같습니다. 다음줄로 넘어가게 되죠. 왜냐하면 div는 다음줄로 넘기는 속성이 있기 때문입니다. 그렇다면 한줄에 3개를 넣을려면 어떻게 .. 2017. 3. 12. CSS_Position 오늘은 포지션에 대해서 포스팅을 하겠습니다! 포지션이란 위치를 말하는거죠^^ㅎㅎ 이번에는 Static 과 Relative 에 대해 알아보겠습니다. 먼저 Static을 알아보도록 하겠습니다. Static은 "고정된"이라는 의미를 가지고 있으며 HTML에서 기본으로 설정이 되어있는 값 입니다. 위에서 보시는바와 같이 static을 설정해 놓으면 저희가 원래 알고있던 결과 값이랑 동일하게 나타나게되죠? 이제 다시 코딩을 해보도록 하겠습니다. 소스가 이해 가시죠....? Default 라는 컨텐츠가있는 div안에 Relative 라는 컨텐츠가있는 div를 넣었습니다! 아래 body태그의 내용은 위와 똑같고 id 값에 변화를 주었습니다!! left:80px; top:100px; 를 추가했더니! Default 컨텐.. 2017. 3. 9. 이전 1 2 3 4 5 다음
