[JavaScript] 생활코딩 1 ~ 5 _ HTML과 JS의 관계 안녕하세요~ 보라해바라기입니다. 드디어 새로운 카테고리에 글을 작성하게 되었네요 ㅎㅎ 블로그를 시작한지도 일주일이 넘어가고요! 일주일 사이에 많은 일이 일어난 것 같아요.. HTML과 CSS 영상도 완강하고 확실히 이 전보다 웹에 대해 많은 지식을 얻는 요즘이랍니다! 오늘은 HTML과 JavaScript의 관계에 대해 전반적으로 살펴볼 거예요. 그럼 렛츠 기릿할 준비 되셨나요?! HTML과 JS간의 관계 밤에 인터넷을 이용할 때, 화면이 너무 밝아서 눈이 아팠던 적이 있으신가요?! 저는 이런 경우가 너무 많아서 애초에 화면 야간 모드를 설정해서 사용한답니다. 눈에 피로를 덜 주면서 더 편하게 웹페이지를 이용할 수 있는 기술이 주/야간모드입니다. 자바스크립트를 사용하면 주간, 야간모드에 해당하는 버튼을 누.. [CSS] 생활코딩 12 ~15 _ 미디어쿼리, CSS코드의 재사용 안녕하세요! 보라해바리기입니다~ CSS도 오늘 부로 벌써 마지막이더라고요?! 생활코딩님의 영상만 다 봤다고 해서 CSS 마스터가 된 건 아니지만 영상을 계속 보면서 느낀건 생활코딩님이 가르쳐주신 것 외에도 제 웹페이지에 구현하고 싶은 기술이 생겨난다는 것입니다. 좀 더 구체적인 설계에 불씨를 붙여준 셈이죠 ㅎㅎ 스킬적인 발전 이외에도 생각의 발전이 이루어진다는게 정말 뿌듯한 것 같아요! 오늘도 제가 배운 것을 복습하고 그 결과를 공유해보도록 하겠습니다. 렛츠 기릿~ 1. 미디어 쿼리 우리는 항상 전체 화면으로 페이지를 보지 않습니다. 예를 들어 과제를 할 때, 한 화면을 최소 2개로 분할하여 한 쪽은 과제 작성을 위한 워드 프로그램, 다른 한 쪽은 자료 검색을 위한 검색 엔진 화면을 띄우죠? 웹페이지의 .. [CSS] 생활코딩 8~11 _ 박스모델, 그리드 안녕하세요~ 보라해바라기입니다. 비가 추적추적 와서 그런지.. 오늘따라 정말 귀차니즘이 도졌지만.. 막상 강의를 들으니까 또 재미있더군요 ㅎㅎ 웹페이지를 만드는 것은 결과가 바로바로 눈에 보이니까 금방 흥미를 되찾게 되는 것 같아요~ 오늘도 배운 내용을 정리하고 저의 웹페이지를 공개하도록 하겠습니다~ 렛츠 기릿! 참고로 HTML에서는 으로 주석 처리를 했다면 CSS에서는 C언어와 마찬가지로 /* 문장 */ 이렇게 주석처리를 하면 된답니다! 1. 박스 모델 block level element : 화면 전체를 쓰는 태그 inline element : 자기 자신의 부피, 콘텐츠 크기만큼 부피 갖는 태그 (부분) 콤마(,)와 border의 요소들을 한 번에 기술함으로써 중복을 제거. border 안에서 순서는 .. [CSS] 생활코딩 1~7 _ 폰트 색, 밑줄, 크기, 정렬, 선택자 안녕하세요~ 보라해바라기입니다! HTML로 웹페이지의 기본 뼈대를 만들어줬다면 그 후에는 살을 붙여야겠죠? 오늘부터는 웹페이지를 디자인하는데 필수적인 CSS에 대해 배우기 시작했답니다! 웹개발자가 되어야지! 라고 다짐하고 난 후, 공부해야 하는 필수 언어에 CSS가 있어서 처음에는 걱정이 앞섰답니다. HTML은 자세히 몰라도 코딩에 관심이 없을 때부터 들어본 적은 있는 단어라 친숙했는데 CSS는 아예 처음 듣는 단어였기에 많이 낯설었어요 ㅎㅎ 하지만 오늘을 시작으로 꾸준히 하다보면 많이 친숙해지겠죠? 오늘 배운 CSS 개념을 정리하면서 글을 시작해보겠습니다~ 본격적으로 개념들을 알아보기 전, 한 가지 참고 사항을 가지고 왔어요~ CSS가 웹 디자인을 위한 언어다보니 어떻게 디자인 할 것인지에 대한 상세한.. 이전 1 다음
