![]()
1. 서론 현재 웹개발 회사에서 인턴생활을 하고 있다. 9월 한달은 정말 정신없이 바빴다. 이것저것 내야 할 서류.. 새 숙소 짐정리, 회사생활 등... 아직 회사에서는 인턴이라 HTML과 CSS를 이용한 퍼블리싱 연습을 하고 있는데, HTML과 CSS도 실물 레벨에 들어서니 난이도가 좀 있다. ( 열심히 배우는 중이다. ) 프론트엔드 분야에 첫 발을 떼다 보니, 자연스럽게 자바스크립트에 대해서도 욕심이 생겼다. 이제는 자바스크립트를 사용해서 프론트엔드 분야 뿐만 아닌, 백엔드 개발( Node js ) 까지도 도전할 수 있는 기회가 열렸다. 그래서 회사 업무(?) 이외에도 자바스크립트를 독학하고 싶어서 오랜만에 다시 블로그 포스팅을 시작한다. 서론이 좀 길었다...ㅋㅋ 2. 자바스크립트의 탄생 1993년..
![]()
CSS에 대한 설명은 웹개발 : front-end 탭에 아주 자세하세 설명되어 있으니 참고! 지난번 포스팅에서는 장고 서버에 HTML 문서를 적용하는 법을 알아보았다. HTML하면 자동으로 생각나는 것이 CSS기 때문에 이번 포스팅은 장고에 연동한 HTML문서에 CSS를 적용해보는 시간을 가져보겠다. 혹시나 하는 마음에 HTML문서가 있는 디렉토리에 style.css를 만들어 HTML에 연동해보았는데, 당연히 될리가 없다ㅋㅋ장고에 연동된 HTML 문서에 CSS 스타일링을 적용하려면 많은 단계를 거쳐야 한다. 1. settings.py에 정적파일 적용 일단 manage.py가 있는 디렉토리에 static이라는 디렉토리를 하나 만들어준다. 그 다음 하위 폴더로 CSS이라는 이름의 디렉토리를 만들어 주고, 다..
FlexBox란? Box와 Item들을 행과 열로 자유자재로 자유자재로 배치시켜주는 역할을 한다. CSS의 꽃이라고도 한다. FlexBox만 잘 이해해도 웹페이지의 레이아웃을 쉽게 기획할 수 있다. ※ float 이미지와 텍스트를 어떻게 배치할 것인지 정의하는 문법 -> float: left : 이미지가 왼쪽에 배치되고, 텍스트들이 이미지를 감싸면서 배치될 수 있도록 해줌 FlexBox는 총 2가지만 이해하면 큰 그림을 이해할 수 있다. ① cotainer : Box에 적용되는 속성값 -> display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content item : 아이템에 적용되는 속성값 -> order,..
![]()
CSS Position 정리!! Relative : 원래 있어야되는 곳에서 벗어난 것 Absolute : 가까이에 있는 박스에서 위치 변경 Fixed : 박스를 완전히 벗어나서 웹페이지 안에서 움직이는 것 Sticky : 원래 있어야하는 자리에 있지만, 스크롤링 해도 위치 변화가 일어나지 않고 계속 붙어 있음 ex) HTML 코드 I'm Box Ex) CSS 코드 div { width: 50px; height: 50px; margin-bottom: 20px; background: red; } .container { background: pink; left: 20px; top: 20px; position: relative; } .box { background: blue; left: 20px; top: 20..
