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..

HTML 에서의 마지막 포스팅이면서 아주 중요한 블록레벨과 인라인레벨입니다. 사진과 함께 코드를 첨부하여 코드에 주석으로 충분한 설명을 기재하였습니다. 인라인 레벨과 블록레벨, 대체되는 요소, 대체되지 않는 요소에 대하여 작성을하고 확인을 해 보았습니다. 바로 코드를 보겠습니다. 요소의 분류 div,span { background: yellow; color:red; width: 200px; height: 200px; /* font-size: 300px; */ } 대체되지 않는 요소 ㄱㄴㄷㄹㅁㅂㅅㅇ 대체되는 요소 블록레벨 h요소는 블록레벨 p요소도 블록레벨 ul역시 블록레벨 ul역시 블록레벨 2 ol 블록레벨 블록 블록레벨테스트 Park 인라인레벨 span 인라인 요소 네이버 다음 label은 인라인요소 ..

이번 포스팅은 폰트 어썸 (Font Awesome)에 대하여 알아보겠습니다. 다소 생소할지도 모르지만 특히나 대학교 전공수업때 웹 프로그래밍을 배우셨던 분들도 모르시는 분들이 꽤나 많은데요 우선 폰트 어썸이란 폰트를 아이콘처럼 사용하는 방법을 말합니다. 쉽게 이야기해서 우리가 많이 본 아이콘들은 사진으로 많이 사용을 하는데 이 폰트 어썸을 이용하면 사진이 아닌 폰트 그자체로 아무리 확대를 해도 깨지지가 않습니다. 폰트어썸을 사용한 실제 웹사이트를 한번 볼까요 ? 다음 사진을 보면 제가 font awesome을 사용하기 위해 찾는 사이트인데요 사이트의 주소는 https://fontawesome.com/ 입니다.지금은 현재 사이트를 캡쳐해와서 사진으로 나오기 때문에 확대를 하면 이미지가 깨질겁니다. 하지만 ..

Let's Start 에서 마지막 포스팅이 되는 WWW입니다! 이번 포스팅은 정말 웹 프로그래밍에서 다루는 것은 무엇인지 그리고 우리가 사용하는 웹의 역사가 무엇인지 정말 간단히 기재를 하겠습니다 ! 아, Web Programming 카테고리 에서는 Let's Start -> HTML -> CSS -> JavaScript 순으로 업로드가 됩니다! 참고해주세요 포스팅 시작하겠습니다 ^^! 먼저 WWW ? 이것은 World Wide Web 이라고하는데요 Web은 거미줄이라고 해석해보면 World Wide(세계적으로 넓게 , 세계적인) Web(거미줄, 거미집) 이라 불리는 HTTP 프로토콜을 사용하기 위한 인터페이스라고 보시면 됩니다. 이 WWW의 역사를 보면 info.cern.ch 이 사이트를 들어가 보시면..

첫 포스팅입니다.이번 포스팅에서는 프론트 앤드(Front end) IDE 및 다룰 내용에 간략히 소개를 하겠습니다. 먼저 , 프론트앤드(Front end) : 개발의 앞 단, 즉 클라이언트 개발 1. HTML (Hyper Text Markup Language) : 웹표준(웹접근성 : 시멘틱) 마크업 2. CSS (Cascading Style Sheets) : 레이아웃 및 디자인 / 인터렉션 / 애니메이션 3. Javascript : 동작 및 제어 / 서버와의 통신 이렇게 간략히 소개를 할 수 있고 웹 프로그래밍 에서 다룰 내용들 입니다! 먼저, 통합개발환경에 대해서 어떤 IDE 가 있고 무엇을 선택한지 알아봅시다. 1. Dreamweaver 2. Bracket 3. Atom 4. Sublime Text ..