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

html의 CSS 영역에 border 속성값이 inherited되지 않은 이유? ‘font’ ‘color’는 상속이 되지만, 테두리 ‘border’ ‘solid’ 등은 상속되지 않는다!! ★ (오랜만에 보니 까먹었네) 그럼 어떤 속성이 상속되고 상속되지 않는지 궁금할 것이다. https://www.w3.org/TR/CSS21/propidx.html

휴..어젠 너무 피곤해서 글 남길 생각도 못하고 바로 졸도했다. 원래 잘때 코 골지 않는데 처음으로 자다가 내 코골이에 놀라 일어났다. 쨌든 집안 인테리어 공사가 끝났다! 다시 빡시게 공부할 수가 있다아! 하하 1. 한 일이라고 잔디 심은 것밖에 없다. 좀..스스로에게 부끄럽다. 부끄러운만큼 내일부터 다시 채워나가야겠다. § 조급히 굴지 말아라. 행운이나 명성도 일순간에 생기고 일순간에 사라진다. 당신 앞에 놓인 장애물을 달게 받아라. 싸워 이겨 나가는 데서 기쁨을 느껴라. - 앙드레 모로아 -

때문에 정신이 읎다. 영혼은 나간 채로 복습에 매진했던 것 같다. 더욱이 이해가 가질 않는 내용을 복습하다보니 더욱 혼났다. 그래도 반복하면 조금은 이해? 익숙해지겠지 뭐~ 1. 진도를 나갈 시간은 없어서 복습 겸 블로그에 정리했다. 솔직히 아직도 이해는 가지 않지만, 그렇다고 포기할 것도 아니고 일단 존-버하고 진도를 빼야겠다. 2. 바쁜 와중에도 잔디는 꾸준히 심고 있다. 3. 피곤하다. 4. 내일은 되도록 전체적으로 복습해주고 시간이 남는다면 진도를 나가보도록 노력할 것이다. 5. 이걸 적었는진 모르겠지만, 섹션6부터는 클론코딩과 병행하는 게 더 효율적일 것 같다. (핀터레스트 레이아웃 과정을 이해는 못하더라도 진도를 다 빼고 클론코딩을 신청해야겠다. 이상)

오늘의 수업은 float란 속성을 중심으로 다음 그림과 같은 레이아웃을 만들어보자! 다만 한계점이 있는데, 크기를 좌우로 늘리든 이 레이아웃의 크기는 변동이 없다. 물론 한계를 해결할 순 있지만 자바스크립트 등의 언어가 필요해지게 되니까 지금은 의미없다. 즉, 화면이 고정된 상태의 성배 레이아웃을 만들어보자. CSS position float flex float Lorem ipsum ~~ ad copyleft 이렇게 만들면 그 값은 다음과 같다. 이제 여기서 css에 속성을 넣어보자. header{ border-bottom: 1px solid gray; } 하고 nav, article, aside가 수직인데 수평으로 만들어줘야 하니까 이때 flex를 쓰지 않고 이 수업은 float니까 바로 float효과..

CSS에서 float란 속성은 본문 안에서 이미지를 삽입할 때, 좀 더 자연스럽게 삽입할 때 사용하는 기법. 많이 사용되는 곳은 삽화 삽입뿐 아니라, 레이아웃을 잡을 때도 많이 사용됨!! 전에 배운 flex란 기능이 최근엔 레이아웃을 잡는 것의 주가 되었지만, 기존에 floating이라는 기능을 통해 레이아웃을 잡는 형태가 있었기에 굳이 flex가 아니더라도 float로 레이아웃을 잡을 수 있기에 알아만두자는 것이다! 일단 다음과 같이 아무런 사진과 아무런 내용을 넣어보자 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ★ VS CO..

주로 신문과 같이 화면의 크기가 큰 매체에서 사용하는 전통적인 레이아웃 기법. column 즉, 열을 조각조각 나눠서 좀더 읽기 편하게 만드는 기법. 그 다음 바로 밑에 class 속성값이 column인 div 태그를 하나 생성. 이 div 태그 안에 lorem1000을 추가. (lorem1000을 쓰고 탭키를 누르면 아무 단어 1000개가 생성된다!) 그다음 CSS영역에 다음과 같이 추가하면! .column{ column-count:2; } (화면을 늘리건 줄이건 2개로 소분된 화면은 유지.) 결과는 그 많은 텍스트가 2개로 소분된다. 아래처럼. 근데 약간 텍스트가 들쭉날쭉한 거 같아서 나란히 보이게끔 하고 싶으면 저번에 배웠듯, text-align:justify; 값을 주면 되겠지! (justify값..