Web39 CSS_Background 오늘은 CSS에서 Background 속성에 대해서 알아보도록 하겠습니다. 우선 코딩을 해보도록 할게요. 이렇게 기본적인 코딩을 합니다. 밑에화면과 같이 결과 화면이 나오겠죠?ㅎㅎ 그럼이제 속성들을 하나씩 알아보도록 하겠습니다. 처음에 알아볼것은 background-color 입니다. 다음 코딩한것과 같이 background-color : 색깔; 로 표현할 수 있습니다. 위의 결과화면과 같이 박스안의 배경색깔이 skyblue로 나타나게 됩니다. 다음 속성은 background-image입니다. background-image 속성 쓰는 법을 배워보겠습니다. 위의 화면과 같이 background-image : url(' 사진이 위치한 주소 '); 이렇게 쓰시면 됩니다. 이렇게 쓰게되면 밑의 화면과 같이 결과.. 2017. 3. 21. CSS_Media Query 오늘은 Media Query에 대해서 알아보도록 하겠습니다. 미디어쿼리란? 핸드폰에서도 웹페이지를 볼 수 있게되면서 반응형 웹사이트가 생겨나고 있습니다. 이에 따라 디바이스의 크기에 따라 화면에 맞게 웹페이지를 보여주는 것을 의미합니다. 그럼 어떻게 사용하는지 코딩을 통해 알아보도록 하겠습니다. 우선 핸드폰에 맞는 웹을 만들기 위해선 안에 태그를 넣어주어야 합니다. 그런다음 코드를 짜야 합니다. max-width:600px 라는 속성의 의미는 최대 폭이 600일때까지 바탕색을 green으로 하겠다는 의미입니다. cascading에 의해서 두개가 겹치게 됩니다. max-width:600px 와 max-width:500px가... 둘중에 어떤게 우선순위가 높을까요...?? 아래에 코딩된 것이 우선순위가 더 .. 2017. 3. 14. 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. 이전 1 2 3 4 5 6 7 ··· 10 다음
