나의 개발일지

구현 목적 원래 하고 싶었던 구현은 'more' 버튼을 클릭하면 이동하시겠습니까? 라는 alert 창이 뜨고 '확인' 버튼을 누르면 각자 상세페이지로 이동하는 것을 시도해봤다 시도 결과 내가 배운 태그로는 안돼서 서치해보니까 location.href 을 쓰라고 나옴 more 이렇게 썼는데도 구현이 되지 않았다.. 도저히 뭐가 문제인지 모르겠어서 조장한테 물어보고 단숨에 해결해주셨다! 나의 문제점 1. 구현해야 하는 게 총 4개였는데 4개 다 함수를 function myFunction ()으로 넣었다 2. '이동하시겠습니까?' 하는 질문형에는 alert 보다 confirm의 함수가 더 어울린다 ++ 3. 추가로 발생된 문제점은 취소 버튼을 눌러도 페이지로 이동한다는 것.. 문제해결 more 1. 각각의 함..

위의 기획서와 같이 목록과 본문이 나란히 위치하는 레이아웃 디자인하기 1. 태그 : 어떤 의미도 없는 태그, 무색무취와 같은 태그 : division의 약자 NAVIGATION ARTICLE 화면 전체를 쓰는 태그는 자동적으로 줄바꿈이 되어 아래와 같이 나타난다. (*Block level element) 2. 태그 : 태그와 똑같은 목적으로 고안된 태그 : 자기 자신의 콘텐츠만큼 자리를 차지하는 inline element --> 줄바꿈이 되지 않는다! 3. 부피감 알아보기 4. 두 개의 태그를 감싸는 부모 태그 추가 후 id 값 설정 NAVIGATION ARTICLE 5. id 값에 테두리 색상 설정 #grid { border-color: pink; } 6. 두 개의 태그를 나란히 배치하기 #grid {..

그럴듯한 웹페이지처럼 보이기 위해 디자인 하기 1 . border-bottom을 이용하여 밑줄 긋기 2. margin과 padding을 이용해서 간격 조정하기 (*개발자 도구 이용하여 어떤 값을 조정할지 파악) 의 간격이 알맞게 조정되었다 3. 태그에 border-right을 이용하여 목록 분류하기 ol { border-right: 1px solid gray; } 이렇게만 하면 오른쪽 맨 끝에 테두리가 생기는 걸 볼 수 있는데 원래의 기획대로 목록 바로 옆에 두고 싶다면 width 를 이용하여 태그 크기를 지정하면 된다. ol { border-right: 1px solid gray; width: 100px; } 짜잔~ 4. 테두리와 테두리 사이의 간격 없애기 개발자도구를 이용하여 어떤 것 때문에 여백이 ..

화면 전체를 쓰는 태그 vs 콘텐츠 크기 만큼 쓰는 태그 WEB HTML CSS JAVASCRIPT JAVASCRIPT JavaScript is the world's most popular programming language. JavaScript is the programming language of the Web. JavaScript is easy to learn. This tutorial will teach you JavaScript from basic to advanced. 위의 코딩에서 태그는 자동으로 줄바꿈이 되어졌다. 왜냐하면 태그 제목 태그인데 제목 태그는 화면 전체를 쓰는 것이 기본적으로 더 편리하기 때문이다. 그리고 링크가 화면 전체를 쓴다면 링크 앞 뒤의 콘텐츠가 줄바꿈되는 경우 불편..

CSS Cascading Style Sheets의 약자 HTML 태그의 골격 부분을 예쁘게 꾸며주는 역할 CSS없이 글자 색을 바꿀 때 heewon park hello 태그는 단지 파란색으로 표현해야 한다는 디자인을 나타낼 뿐 ​ 색을 blue 에서 black 으로 바꾼다면 3개의 코드를 일일이 바꿔야하지만 CSS의 태그를 사용한다면 3개의 중복 코드를 단 하나의 코드를 만들어 중복을 제거할 수 있다 CSS 문법 a { color : red ; } ​ a : 선택자(Selector) color: red ; : 선언, 효과(Declaration) color : 속성(property) red : 값(value) CSS의 여러가지 태그 1. 폰트 색상 바꾸기 Hello 태그 안에 태그를 사용 ​ 모든 의 태그..

내일배움 부트캠프에 참여하게 되었다. 본격적으로 시작하는 것은 10월 4일이지만, 사전캠프라고 해서 미리 지급된 강의로 공부하고 자기주도적 학습의 루틴을 익히고자 개강 전부터 참여하는 것이다! 게더타운에 모여 조원들과 화면 공유를 하면서 같이 공부를 하니까 의욕이 더 생기는 기분! 지금 쓰는 것은 스파트타코딩클럽에서 강의가 지급되기 전 생활코딩 유튜브로 공부한 내용이다. HTML HyperText Markup Language의 약자 Hyper Text : 링크로 연결되어 있는 Markup : 문법적 특성이 있는 Language : 기계와 인간과의 컴퓨터 프로그래밍 언어 (기계와 인간 사이의 약속) 기본 문법과 태그 // 이 문서에는 HTML이 담겨있다는 뜻 // // 'html5'를 입력하면 자동으로 기..