[웹] HTML/CSS #13 :: 부트스트랩
2017. 12. 25. 20:10
DEVELOP/HTML&CSS
반응형 웹 디자인을 할 때 유용한 프레임워크가 있다. 부트스트랩이다. 트위터 개발자들이 만든 CSS 프레임워크이다. 이미 반응형과 관련된 CSS 코드들이 다 만들어져 있고, 내 HTML 소스코드에다가 해당 클래스를 입력하기만 하면 알아서 적용이 된다. 매우 간편하다. 어떤 프레임워크나 마찬가지겠지만, 장단점이 있다. 부트스트랩의 장점은 역시 빠르고 간편하다는 것이다. 이미 만들어져있는 소스를 가져다 쓰기만 하면 되니 빠르다. 직접 하나하나 CSS를 지정해가면서 디자인할 필요가 없는 것이다. 단점이라면 디자인이 정형화 되어있고, 완벽하게 커스터마이징 하기에는 무리가 있달까. 가장 좋은 방법은 부트스트랩으로 그리드를 잡고, 개별 디자인 요소들은 직접 꾸미는 것이라고 생각한다. 부트스트랩의 기본은 그리드다. ..
[웹] HTML/CSS #12 :: 미디어쿼리
2017. 12. 1. 17:28
DEVELOP/HTML&CSS
반응형vs적응형 포스팅에서 반응형은 미디어쿼리를 이용해서 만든다고 언급했다. 미디어쿼리는 단순하게 CSS의 조건문이라고 생각하면 편하다. 정확한 개념은 아닐 수도 있다. 하지만 기능은 그와 같다. '미디어 유형이 무엇이고 화면 넓이가 x 픽셀 이상일 때, a 태그에 이런 서식을 적용해라'라고 정의하는 것이다. 미디어쿼리의 포맷은 아래와 같다. @media 유형 and (조건) { css 선택자 { css 속성: css 값; } } 실제 코드를 보면 더 쉽게 이해가 될 것이다. 그냥 보통의 css 코드를 "@media 유형 and (조건) { }"의 중괄호 안에 집어넣은 것이다. 그럼 html 파일이 보여지는 디바이스의 유형과 조건이 맞을 때에 한해, 중괄호 { }안의 css가 적용되는 것이다. 다음 예를..
[웹] 프론트엔드 개발자란?
2017. 11. 14. 22:05
DEVELOP/IT
개발이란 프로그램을 구축, 구현하는 과정을 통틀어 말한다. 그리고 여기에도 각각 분야가 있다. 개인적으로 프로그래밍을 공부할 때 생각보다 많은 프로그래밍 언어가 있다는 것에 놀랐다. 놀랐다기보단 막막했다. 앱 기획을 하다가 프로그래밍에 대한 이해가 필요할 것 같아서 시작했다. 요즘 대세라는 파이썬으로 기초를 익히고, C++, 자바 정도 배우면 되는 줄 알았다. 그런데 일일이 열거하기도 귀찮을만큼 많은 언어가 있었다. 처음엔 각각의 언어의 특징, 용도를 읽는 데만 꽤 많은 시간을 보냈었다. 알게 된 것은 목적에 맞는 언어가 있다는 것. 즉 C++과 자바를 배우면 아이폰 앱도 만들고, 안드로이드 앱도 만들고, 윈도우 프로그램도 만들고, 홈페이지도 만드는 게 아니라는 것을 알았다. 아이폰 앱을 개발하려면 스위..
[웹] HTML/CSS #9 :: HTML5 기본 템플릿
2017. 11. 8. 22:22
DEVELOP/HTML&CSS
class="class1" id="leader1>a class="class1">b class="class1">c class="class2" id="leader2">d class="class2">e class="class2">f 지난 번에 설명 못한 부분이 있다. CSS 선택자 실습할 때 위와 같은 HTML 코드를 사용한 적이 있다. 과 는 순서 없는 리스트와 그 세부 항목을 만드는 태그라고 설명한 적이 있다. 그럼 그 나머지는 무엇일까. 지금부터 알아보겠다. 태그 안의 내용은 삭제하면 위의 코드와 같다. 이게 바로 html의 기본 템플릿이다. 모든 html로 만들어진 웹페이지는 이러한 형식을 갖고 있어야 한다. 그래야 웹 브..
[웹] 비전공생도 쉽게 코딩 공부할 수 있는 코드카데미
2017. 11. 8. 10:48
DEVELOP/IT
HTML/CSS는 잠시 쉬고, 오늘은 공부하기 좋은 웹사이트 하나를 추천 겸 소개하려고 한다. Codecademy다. 너무도 정직한 코드를 배우는 학원이라는 네이밍이다. 유투브나 MOOC, 각종 책과 출판사에서 제공하는 무료 강의 등 공부할 수 있는 소스가 너무나 많은 세상이다. 그 중에서도 코딩 기초를 배우기에는 가장 편리한 소스라고 생각한다. 직접 타이핑을 하고 바로 코드 검사를 해주는 웹 어플리케이션으로 학습하기 때문이다. 코드카데미에서 다양한 언어들을 '무료로' 배울 수 있다. 무료라는 점도 좋지만, 인터페이스가 좋아 깔끔한 학습을 경험할 수 있다. 최근에 리뉴얼을 하면서 유료 코스도 생겼는데 그건 안 해봐서 잘 모르겠다. 특정 카테고리에 대해 필요한 부분만 심화해서 배우는 것 같다. 기본 무료 ..
[웹] HTML/CSS #8 :: CSS 선택자
2017. 11. 7. 18:49
DEVELOP/HTML&CSS
사실 7편보다 이걸 먼저 했어야 순서상 효율적이지 않았을까 싶다. 그래도 뭐 선택자 개념 배운 다음에 다시 속성 활용해서 실습하면 된다. 1편부터 쭉 봐왔다면 알겠지만 HTML은 내용을 담는 통이고, CSS는 그 내용이 보여지는 모습을 꾸민다. HTML에 태그를 이용해 각각 요소들을 만들어 구성을 짜면, CSS는 각각의 요소들을 어떤 방식으로 표시하라고 브라우저에게 명령한다. 비유적으로 표현하면, HTML은 레고다. 각각의 태그들은 새하얀 레고블럭이다. 그리고 레고블럭들을 이용해 원하는 모양을 만든다. CSS는 그 새하얀 레고블럭들을 칠하는 것이다. 정확히 말해 HTML과 CSS는 이러한 행동을 하라는 지시를 적은 명세서이다. 실제로 레고를 쌓고 블럭을 칠하는 건 브라우저다. 그럼 CSS에는 브라우저가 ..
[웹] HTML/CSS #7 :: 실무에 자주 쓰이는 속성
2017. 11. 6. 17:45
DEVELOP/HTML&CSS
속성들에 대해 좀 더 디테일을 알아볼 차례다. 모든 속성을 다 소개할 수는 없고 실무에서 자주 쓰이는 대표적인 속성들, 꼭 알아야 하는 것들만 알아보겠다. 그 외에는 그 때 그 때 필요할 때, 이 기능이 있으면 좋을 것 같단 생각이 들 때 검색을 활용하면 된다. 레퍼런스를 참고하거나. HTML 요소의 구조도 1. class 속성 a b c 가장 많이 쓰이는 속성 중 하나다. class는 말 그대로 클래스다. HTML 요소들을 일정 클래스로 분류하는 것. a, b, c 학생(요소)는 1반(클래스)으로 지정하고, d, e, f 학생(요소)는 2반(클래스)로 지정한다면 무엇이 편할까. 클래스는 CSS에서 해당 요소들을 선택하기 위해 사용하는 것이다. 즉 CSS에서 클래스를 선택하여 서식을 적용하면, 해당 클래..
[웹] HTML/CSS #6 :: 속성이란?
2017. 11. 6. 10:41
DEVELOP/HTML&CSS
HTML 실습정말 쉬운 실습이건 진짜 시작이 반이다네이버로 가자 빠르게 진행하겠다. 속성은 태그를 보조해주는 역할이다. 태그는 사이에 태그 이름이 들어가 있는 단순한 구조다. 여기에 좀 더 많은 기능을 부여해주는 것이 속성이다. CSS를 통해 태그를 보조해주는 경우가 많지만, 디자인보다 '기능'에 가까운 쪽은 HTML 자체 속성을 활용한다. 위의 표 중에서 맨 아래 요소만 가져와보겠다. #에는 네이버의 메인 주소를 치면 된다. 네이버로 가자 위의 줄 전체, 즉 오프닝 태그부터 클로징 태그까지, 다시 말해 부터 까지를 모두 일컬어 HTML 요소(element)라고 부른다. 그리고 파란색으로 색칠한 와 를 앞선 포스팅에서 설명한 것처럼 태그라고 부른다. 그리고 오프닝 태그의 안에 담겨있는 주황색, 저게 속성..
[책] HTML5+CSS3 웹 표준의 정석 :: 웹 기획자, 웹 퍼블리셔, 웹 디자이너, 프론트엔드 개발자가 되고 싶다면
2017. 10. 26. 07:57
LIFE/책
초등학교 때 정보? 컴퓨터? 과목에서 html을 배운 적이 있다. 그 때는 이게 왜 필요한 지도 몰랐다. 선생님이 하라는 대로 메모장에다가 의미를 알 수 없는 기호 같은 것들을 집어넣으면 색깔이 바뀌고, 내용이 입력되고 그랬던 것 같다. 다음 카페 배너 같은 걸 만들 때 태그가 필요하다 그랬나, 그런 걸 얼핏 본 기억도 난다. 왜인지 기억나는 이름이 장미 가족의 태그 교실. 집에 동생이 샀던 책이 있었다. 연예인 카페에 올릴 뭐 만든다고 아마 샀을 거다. 그 당시의 인터넷과 지금의 인터넷은 느낌이 상당히 다르다. 일단 디자인이 다르다. 옛날 홈페이지는 동글동글하고 명암이나 그라데이션도 들어가고 상당히 입체적이다. 요즘은 플랫이다. 무엇이 예쁜가는 시대에 따라 바뀌니깐 넘어가자. 지금은 무엇보다도 웹의 사..
[웹] HTML/CSS #3 :: 시작하기-웹 에디터
2017. 10. 20. 23:56
DEVELOP/HTML&CSS
HTML과 CSS를 하기 위해 무엇부터 해야할까. 우선 에디터가 필요하다. 우리말로는 편집기다. 사실 아마 윈도우를 사용하는 사람 대부분은 에디터를 사용해봤을 것이다. 가장 대중적인 에디터는 메모장. 여러분이 아는 바로 그 메모장이다. 물론 웹 개발자들에게 대중적인 에디터는 아니다. 웹 개발자들은 좀 더 편한 에디터를 쓴다. 메모장으로 충분히 훌륭한 코딩이 가능하지만 다른 에디터를 쓰는 이유는? 편하니깐. 다른 툴을 쓴다고 실력이 떨어지고 메모장을 쓴다고 실력이 좋은 건 아니다. 그냥 다른 툴들이 작업시간을 훨씬 줄여주는 여러 기능을 갖고있을 뿐이다. 만약 웹 에디터로 코딩을 할 수 있지만 메모장으로 못하는 사람이 있다면 실력이 떨어진다고 볼 수 있긴 하다. 하지만 실력이 좋은 개발자라고 메모장을 쓰진 ..