개발자 취업 도전기

생활코딩님 css 강의를 끝마치고 더 진도를 나가기보다는 쉬어가면서 이때까지 공부했던 것들을 바탕으로 내가 만들고 싶은 사이트를 만들려고 한다. 태그를 1도 모르던 내가 html/css 문법과 구문을 작성할 수 있다는 건 혁명이다. 강의를 들으면서 느낀 건 풍부한 웹페이지를 만들려면 선택자와 요소들을 많이 공부해야겠다고 느낌. 잠시 멈춰서 내가 만들고 싶은 웹페이지를 정하고 구성을 생각 해볼 예정이다. * 참고 사이트 (엄청 자세히 나옴) https://www.w3schools.com/css/css_howto.asp How to add CSS W3Schools offers free online tutorials, references and exercises in all the major languages..

https://www.youtube.com/watch?v=djBrHjeitUo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=14 * CC BY 생활코딩 코딩을 잘하는 방법은 중복의 제거가 필요할 때 css만 빼고 코드만 별도의 파일 (style.css) 로 복붙. 기존에 html 있던 스타일 태그는 지워준다. "웹브라우저야 지금 커서가 깜빡 거리고 있는 곳에는 style.css 라고 저장 되어있는 별도의 css 파일을 다운로드 받아서 여기에 원래 그 코드가 있었던것 처럼 동작해" 기존에 html에 있던 style코드는 별도에 css 파일로 옮겨 있는거 확인. 이작업이 필요한 이유 -- > 만약 누군가 웹페이지에 있는 모든 링크 밑에 있는 밑줄을 달라고하면 해당 파일로..

https://www.youtube.com/watch?v=qe3nSIg2k3Y&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=13 * CC BY 생활코딩 화면의 크기가 800px 보다 작을때 id값이 grid인 태그가 블럭으로 바뀌게 됨. 기존에 있던 곳에 위치 할수 없기 때문에 밑으로 내려온다. 선이 안사라지는 이유는 기존 태그의 border 속성 때문. 미디어 쿼리 크기를 지정해주고 기존 #grid 에서 설정한 코드를 복붙 한 뒤 디스플레이 블럭, h1 아래 테두리 none, 목차 오른쪽 선 none 으로 설정해 주면 된다. 결과적으로 800px 크기 이상이면 기존 화면 그대로 노출. 800px 이하 이면 미디어 쿼리가 적용 됨 (작은화면에도 가독성이 좋게 된다.)..

https://www.youtube.com/watch?v=aA4xunvDWU8&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=12 * CC BY 생활코딩 반응형 웹, 반응형 디자인이란? 화면의 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화된 웹페이로 동작함 미디어쿼리란? 반응형 디자인을 CSS 통해서 구현하는 핵심적 개념 화면에 크기에 따라 보였다 안보였다 반복하고 싶다면 화면의 크기를 알아야함. 구글 개발자 도구에서 검사 클릭 하면 화면의 크기 확인 가능 스크린의 넓이가 800px보다 클때 의 display : none; = @media(min-width:800px) : 즉, 화면의 크기가 최소 800px 이다. 어렵다 어려워 ㅠㅠ 웹페이지 크기 줄이고 늘리면..

https://www.youtube.com/watch?v=AL8RSY8rADY&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=11 * CC BY 생활코딩 h2, 태그를 나란히 두어야 함 ( 각자 독립적인 형태 이기 때문에 묶어줘야함) 목차와,본문을 grid의 하나의 요소로 사용 하려면 아무의미 없는 로 묶어준다 ( id = "grid") #grid ol { } 부모가 gride인 태그를 을 선택하는 선택자가 된다. 작업하면서 검사 기능 사용해서 padding값이나 magin값 확인 제목과 목차 글이 어느정도 정리가 되면서 기본 웹페이지 형태를 갖추는것 같음. 아직까지는 너무 어렵고 익숙하지 않아서 계속 연습 해야 될것같다..

https://www.youtube.com/watch?v=M1eQFIBY2vI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=10 * CC BY 생활코딩 태그 디자인 목적을 위해서 어떠한 의미도 없는 태그를 사용해야 될때가 있음 (무색무채와 같은 태그) 줄전체를 쓰는 block 태그이기 때문에 줄바꿈 적용됨. 태그 div 태그와 똑같은 목적으로 사용 되지만 inline 태그이다. (목적에 따라 사용 결정) 두요소( NAVIAGTION, ARTICE ) 를 나란히 놓기 위해서 gride 사용 그러기 위해서는 2개의 태그를 감싸는 부모가 필요함. 부모에 태그에 gride 라는 id값을 줌 ( id값은 아무거나 지정 가능, 앞에 # 붙이는거 꼭 기억) display: gri..

https://www.youtube.com/watch?v=4ir8XAf7wxI&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=9 * CC BY 생활코딩 h1 아래 밑줄을 주려면 테두리 아래 선만 표시하면 됨. 제목 위치가 애매 하게 되있기 때문에 magin을 없애주고 padding 값으로 제목과 테두리 사이를 띄어줌. 목차부분은 인데 줄 전체를 쓰는 block 태그이기 때문에 width로 폭넓이를 조절 magin과 padding 이용해서 간격 디자인 해주고, body 태그의 마진도 0으로 설정해줘서 빈공간을 없애줌.

https://www.youtube.com/watch?v=MLjCVUspcDo&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=8 * CC BY 생활코딩 줄 전체를 쓰는 태그를 block level element 자신의 부피 만큼 가지는 태그 inline element block 태그도 inline 태그 처럼 자신의 부피 만큼 쓰게 할수 있음. display : inline; 입력하면 아래와 같이 영역이 바뀜 inline 태그 또한 display : block; 입력하면 아래와 같이 영역이 바뀜 즉, block level element, inline element 는 display 속성의 기본값, CSS를 이용해서 언제든지 바꿀수 있음. h1,a는 안에 있는 중복이기 때..

https://www.youtube.com/watch?v=8-rCMmamtDE&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=7 * CC BY 생활코딩 https://www.w3schools.com/cssref/css_selectors.php CSS Selectors Reference W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more. www.w3schools.com - ..

https://www.youtube.com/watch?v=WcED6Ia1IY4&list=PLuHgQVnccGMAnWgUYiAW2cTzSBywFO75B&index=6 * CC BY 생활코딩 * 검색어 추천 css text size property : 폰트 크기 사이즈 속성 css text center property : 폰트 가운데 정렬 속성 text-align: center; align 사전적 의미 : 정렬 최종적으로 폰트 사이즈는 커지고, 제목 텍스트를 가운데 정렬되서 웹페이지가 표시됨. property는 그때마다 구글링 해서 사용 하면 되기 때문에 외울 필요 없음!