끈기의 힘 : 뉴비에서 풀스텍으로

섹션5. 미디어쿼리(Media query) - 1 : 기본 : 미디어는 먼저, 가전제품 중 TV나 핸드폰, 프린터, 데스크탑과 같이 어떤 정보를 매개해주는 매체들이라 할 수 있다. 쿼리는 미디어의 상태를 미디어에게 물어봐서 그 상태에 따라 우리가 다른 디자인을 할 수 있도록 한다. 라는 느낌. ‘반응형 디자인’의 핵심 기능이 바로 미디어 쿼리! 이제 코드를 만들어보자. 500px이하까지는 백그라운드 컬러를 red로 하고, 501~600px까지는 green으로 하겠다! ★ 근데 만약에!! 위에서 green값을 매긴 미디어쿼리를 red값을 매긴 미디어쿼리 아래로 위치가 반대로 위치되면, 500px이하로 떨어져도 바탕화면은 green 값으로 나오게 된다. 이건 예전에 배운 ‘캐스케이딩’과 관련이 있다!! ( ..

섹션5가 일단 가장 하드한 것 같다. 1. 미디어 쿼리, float, 다단의 기능에 대해서 배웠다. (블로그에 정리해야 할텐데 그것보다 중요한 건 복습인듯) (float가 flex처럼 생소해서 어려웠고 나머진 들을만 했다.) 2. 다단 이후로 이어지는 핀터레스트 스타일 레이아웃 만드는 것은 내일 들을 예정. (시간만 된다면 섹션6로 넘어가고 싶지만, 생각보다 양이 많아서 계획을 수정해야겠다.) - 섹션6부턴 클론코딩과 병행공부해야겠다. 3. 기절 가능. 4. 잔디 열심히 심는 중이다. 5. 눈도 아프고 머리도 아프고 근데 문제는 내일과 모레는 또 공부할 환경이 갖춰지지 않는다. 시간도 없고 정신도 없고 (그래도 포기하진 않는다. 포기할 바에 자살하는 게 더 이로울테니)

3.1절을 맞아 경건한 마음가짐으로 잠을 자고 오늘 다시 시작했다. 1. CSS 섹션5. flex~ 다 했다. 하긴 했는데 머리가 아픈 건 왜일까? 이해가 안 간다. 엌 2. 운동 완료 3. 잔디 심었드아 4. 이제 복습해야제

5-4. flex : holy grail(성배) layout // 얘들은 화면 전체를 사용. 화면의 크기가 작아질수록 main의 크기만 작아지는 형태. 오늘의 목표 : holy grail layout 만들어보기! 일단 다음과 같이 코드를 짜보자. 생활코딩 html css javascript 생활코딩은 일반인을 위한 코딩 수업입니다. AD 홈페이지 일단 보기 편하게 container 밑에 header, section, footer를 줄여서 보자. 우린 이제 이 3가지 태그를 어떻게 하고 싶나? 수평으로 나란히 보여주고 싶어! 얘네 3 아이템들의 부모의 역할을 하는 컨테이너 즉, 바깥에 있는 컨테이너라는 클래스 값을 갖는 녀석에게 display값을 flex;로 줘야한다! 이게 시작! 일단, 우리가 flex를..

5-1. flex : intro : 주로 레이아웃을 잡을 때 사용하는 기능. 어떤 컨텐츠를 만들 때, 그 컨텐츠를 잘 정돈해서 구조화시킬 때 사용하는 것 = 레이아웃. 당연히 ‘레이아웃’은 디자인할 때 가장 중요한 주제. 우선 플렉스를 사용하기 위해선 태그가 두 단계가 필요하다. ex) 태그는 부모태그인 이나 태그가 필요한 것처럼. 정렬하고자 하는 각각의 item들은 부모 태그에 해당하는 container의 역할을 하는 태그가 필요하다. (저런 태그는 없고, 저런 역할을 하는 태그를 활용한다는 의미) 위 그림과 같이 정렬의 대상이 되는 아이템들은 컨테이너에게 부여해야 하는 속성들이 있고 안쪽에 있는 아이템들에게 건네줘야 할 속성들이 있다. 그래서 우리는 그것을 구분해서 어떤 속성은 컨테이너 어떤 것은 아..

가끔 style태그를 적용시 태그와 속성 속성값의 색이 모두 하얀색이 되는 경우가 있다. 처음엔 별 신경 안 썼지만, 코드 내용이 길어지다보니 신경이 쓰이기 시작했다. 그래서 구글에 쳐보니 okky에 나와 같은 증상을 겪는 분의 글을 보고 방법을 알게 되었다. 스타일 닫힌 태그 아무 곳이나 띄어쓰기 해놨다 돌려놓으면 얘네들이 인식을 한다. 염병하네 하다하다 화가 극에 달해, 결국 비쥬얼 스튜디오 코드로 갈아탔다. 훠어어어얼씬 좋다. 와 사랑합니다 개발자님들!! 아니 어! Emmet 기능이 둘다 되면 당연히 비쥬얼이 최고지 이거지 임마! 어! 아오 1. 한국어 기능까지 있다. 이야 완-벽하다 이야 이거제~(컨트롤+쉬프트+X 누르면 확장메뉴로 갈텐데 거기서 'korean language' 검색 후 설치만 하..