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

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

5-3. 포지션(position) - fixed(고정된) 이 내용에선 ‘grand’까진 필요 없으니 다음과 같이 코드를 작성하겠다. other parent me 이제 me엘리먼트의 포지션 속성 값을 absolute에서 fixed로 바꿔보자. 일단 결과로는 바꿔도 웹페이지에는 변화가 없다. 그럼 실제로도 그런지 알아보자. '부모에 속하는 id 속성값이 아닌' parent 밑에 새로운 large라는 id 속성값을 갖는 태그를 생성해보자. 그리고 이 large에 다음과 같이 css를 적용하고자 한다. #large{ height:10000px; background-color: tomato; } other parent me large 이렇게! 그러면 다음과 같이 보일 것이다. large의 크기가 원체 크니, 웹페..

5-1. ★ 포지션(position) - relative VS static ★ (다만, 좀 어려운 주제) : HTML의 태그들, 즉 엘리먼트가 화면상의 어디에 위치할 것인가?를 정하는 것 Box Model이 ‘부피감’, 엘리먼트와 엘리먼트 사이의 간격 등을 결정하는 아주 중요한 것이었다면 포지션은 각각의 엘리먼트의 위치를 지정하는 방식과 관련한 마찬가지로 중요한 주제! 일단 강의를 따라, 다음과 같이 만들어보자. other parent me (아톰에서 그대로 복사했는 데 들여쓰기가 안 되네..) ★ 에서 id 속성값이 other인 태그와 id 속성값이 parent인 태그 안에 id 속성값이 me인 태그를 만들겠다! 라고 한다면, ‘아톰’에선 #other+#parent>#me 하고 탭 누르면 된다! 위의 ..

1. HTML의 태그는 성격에 따라 화면 전체를 쓰는 애들과 자신의 크기만큼만 쓰는 애들로 나뉜다. 첫 번째는 block-level-tag(==block level element) 다른 하나는 in-line 방식이라 한다. ex) hello world 안녕하세요. 쓰리별입니다. 여기서 왜 태그는 줄바꿈이 될까?? 당연하다고 생각하지 않아보자. 다시, 밑에처럼 코드를 변경해도 태그 다음에 오는 ‘입니다.’는 줄바꿈이 되지 않는 것을 확인할 수가 있다. hello world 안녕하세요. 쓰리별입니다. 이제 h1과 a태그에 style을 줘보자. 이때 처음 배우는 편한 게 나오는데! ★ 만약, 똑같은 표현을 주고 싶다면 h1, a{border:1px solid blue;}처럼 h1 뒤에 콤마( , )만 넣어주면..

1. 크기 : font:size (타이포그래피) CSS 속성 중 가장 많이 사용되는 건 ‘font:size’이다. 겁나 쉬운데, 어려운 게 하나 있다. 그것이 바로 ‘단위(Unit)’이다. 종류도 다양한데, 우리가 관심 가질 것은 px(픽셀)와 em, rem이다. 세가지의 차이점은 상대적이냐 절대적이냐의 차이. 즉, 픽셀은 우리가 지정한 폰트의 크기가 딱 고정되어 있다. 그러나, em이나 rem은 사용자가 브라우저의 설정을 바꾸면 그에 맞게 폰트 크기가 달라지게 된다. 그럼 이중 누굴 써?? 케바케지만, 결론적으로 오늘날엔 ‘rem’을 쓴다. 라고 생각. ※ 픽셀과 rem의 차이점. ★ 1) 사용자가 브라우저의 글꼴 크기를 키우면, px은 무반응 / rem은 바뀐다. 크기를 고정시키는 게 필요한 경우에만..

1. 상속 : HTML의 태그들, 즉 element들을 디자인할 때, 어떤 엘리먼트의 속성값을 줘서 효과를 주면 그 엘리먼트에 속해 있는 하위의 엘리먼트가 그 속성을 이어받게 되는 성질. ★ 주석 넣는 법 : /* */ 사이에 원하는 내용 넣기. ex) ★ 무엇이 더 효율적인 선택인가? 주석에 있는 것처럼 따로 따로 css를 적용하는 것과 가장 외곽에 있는 html 하나만 적용하는 방식 중에서 말이다. 당연히 전체를 표현해줄 수 있는 HTML에서 배운 부모-자식 태그 관계처럼 부모의 컬러를 자식들이 물려 받는 ‘상속’의 표현이 더 효율적일 것이다. ★ 즉, 일단은 html에 전체적으로 css를 적용하고 특정 부분에는 id 선택자를 활용하는 것이 훨씬 경제적이고 생산성이 높다고 할 수 있다. 다음 그림처럼..