싱이의 devlog

페이지 제목: 목표 ( My Goals ) 페이지 페이지 설명: 평소 내가 추구하는 모토, 목표 등의 내용을 담은 페이지:) CSS 1. 클래스명 정하기 (CSS naming methodology) HTML을 작성할 때 고민이 많았던 부분이 바로 class 이름을 정하는 것이었다. 코딩을 해보니 분명히.. 이 코드는 짧게 안 끝날 것 같다는 생각이 들었다. (물론 내가 깔끔한 코드를 작성하지 못해서 그런 걸 수도 있지만?) 어쨌든 분명 클래스명을 정하는 통일된 양식이 있을 것 같은데, 막상 다른 사람들 코드를 보면 클래스명이 다 달라서 무엇을 써야 할지 모르겠었다. 고로 정리해보는 클래스 이름 정하는 방법! BEM(Block Element Modifier) BEM이란 CSS 제작 방법론들(OOCSS, S..

HTML 1. HTML 전체 뼈대 잡는 법 HTML을 처음 작성하려 했을 때 조금은 막막했다. 물론 유튭 강의를 활용해 HTML, CSS 내용을 공부했지만, 뭔가 ABC만 가르쳐주고 자, 이제 영어 문장을 만들어봐! 라고 말하는 느낌! 어떻게 구조&골격을 짜야할지 고민이 많았어서, 다른 개발자들의 홈페이지들의 전체적인 틀이나, 클래스 명을 참조하여 작성을 시작하였다. 참고한 홈페이지들은 다음과 같다. 심플하지만 내가 구상한 기능들을 가지고 있는 홈페이지들을 선택해 보았다. Brittany Chang, 김민지의 자기소개서, Hey, I'm Jihyung!, Mac Böck. 이 중 특히 몇몇 개발자들의 홈페이지 HTML, CSS 코드를 보면 처음보는 나도 이해가 될 수 있을만큼 구조가 잘 짜여져있다는 것을..

첫 페이지 개발은 'Intro-click' 페이지! 페이지 설명 사용자가 사이트를 열면 처음 마주하는 페이지이다. 해당 페이지에 있는 'Click Me!' 라는 텍스트를 읽고 캐릭터 그림을 누르면 실제 홈페이지 메인 화면으로 이동하는 페이지이다. 처음 HTML/CSS 강의를 들으면서 배웠던 게 하이퍼링크 기능이었는데, 이를 내 프로젝트에도 넣어보고 싶어서 Intro-click 페이지를 넣게 되었다. 구현해보고 싶었던 기능 1. 웹 브라우저 사이즈에 따라 중앙 위치 그림 사이즈 자동 축소&확장 img 관련 css 코드는 아래와 같다. .center{ display:block; margin-top:170px; margin-left:auto; margin-right:auto; width:25%; } 우선 im..