Recoding & Share Devlog

박스 모델에 대해서 알아보면 먼저 F12를 통하여 해당 영역의 크기를 볼 수가 있습니다. 예를들면 이런식으로 내부에 크기가 있고 그 위에 패딩 보더 마진 이런식으로 보여지는것을 통틀어서 박스모델이라고 합니다. 코드의 주석과 내용을 보고 결과 화면을 보겠습니다. 박스모델 /* 박스모델 - 한 요소가 박스의 모양을 갖는 모델 - width, height, padding, border, margin 로 구성 - 더 정확히 말하면, width, height, padding-top, padding-right, padding-bottom, padding-left, border-top, border-right, border-bottom, border-left, margin-top, margin-right, margi..

오랜만의 포스팅입니다. Title /* id 가 list 의 요소의 자손들중에 li를 전부 선택 */ #test1 li { color:red; border : 2px dotted #512335; margin : 7px; padding : 5px; } /* id 가 list 인 요소의 자식인 li 의 자식인 span 요소를 선택 */ #test2>li>span { color : blue; } /* 1) 요소 선택자 : 요소명 2) id 선택자 : '#' 3) class 선택자 : '.' 4) 자손 선택자 : ' ' 5) 자식 선택자 : '>' */ 리스트1 리스트2 리스트3 리스트4 리스트1 1 리스트2 2 리스트3 3 리스트4 4 테스트1 테스트2 테스트3 테스트4 저번에 했던 선택자에서 추가적으로 선택..

이번 포스팅에서는 지금까지 기재한 내용을 기반으로 예제를 만들어 보겠습니다. 예전 사이트에서 많이 써본 텝 모양 만드는것 그리고 화살표를 만들어서 활용하는 포스팅 그리고 현재로도 프로필사진을 둥글게 하는 여러 속성에 대한 것입니다. 마크업은 간단합니다 html 부분을 먼저 보면 텝모양 만들기 내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다.내용이 들어갑니다. 내용이 들어갑니다.내용이 들어갑니다. 화살표 만들기 프로필 사진 이런식으로 간단한 마크업입니다. 전체 코드를 확인해서 어떤 CSS 속성이 들어갔는지 보겠습니다. 실습 hr { margin-top: 50px; margin-bottom: 20px; } #title { width: 200px; height: 40px; border-radius:30p..

이번에는 저번에 하지 않은 margin, padding, border에 대한 포스팅입니다. 이런식의 레이아웃을 구성을 해보겠습니다. 실제로 많이 색상 이나 그림자 모양을 만드는 것은 많이 사용이 됩니다. 먼저 html 마크업을 보면 간단합니다. ABC Hello 이정도의 마크업만 되어있습니다. div 3개와 hr 요소가 있네요 그럼 css는 어떻게 되어있을지 보겠습니다. 보더 hr { margin-top: 30px; margin-bottom: 30px; /* margin은 바깥쪽 여백을 의미합니다. top, right, bottom, left가 있습니다. 이 모든 것을 포괄하는 것이 margin 입니다. */ } #box { width: 100px; height: 100px; background:#03D..

CSS 관련하여 첫 포스팅입니다. CSS의 기본부터 차근차근 알아보겠습니다. 이번 포스팅에서는 선택자에 대한 포스팅입니다. 다음과 같은 레이아웃을 만드는데는 div를 이용하여 크기를 지정하고 안에 글자를 쓴 것입니다. 바로 코드를 보겠습니다. 선택자 /* id 선택자 : 요소 한개만 선택 '#' 키워드 class 선택자 : 요소 여러개 선택가능 '.' 키워드 */ #red { color: #FF0000; } #blue { color:#0000FF; } #green { color:#00FF00; } .box{ /* border : 가장자리 border 속성 값 : 선의두께, 선의모양, 선의색상 */ margin:20px; padding: 50px; border:1px solid black; width: 2..