html/css 공부하는 방법

Question

요즘 블로그 운영하면서 html과 css 공부하는데 재미가 붙었습니다.그런데 인터넷강의를 보면서 하는것보다는 책이나 미리나온 강좌를 보고 따라하는 편인데 블로그에서 가장 필요한 요소는 텍스트박스를 특정모양으로 만들어 이미지나 폰트어썸을 추가해  텍스트 부분이나 이미지 부분만 특정 애니메이션만 준다던가 잡다구리한 설명말고 자바스크립트 없이(블로그에서 자바스트립트까지는 필요없음)바로 응용가능한 그런  팁 같은 걸 알고싶은데책도 종류가 너무 많고 어떻게 배워야 할지 모르겠습니다.

LTEO · Answer

안녕하세요. 블로그 운영을 위해 html/css를 공부중이시군요.저도 블로그를 운영하면서 html/css를 계속 공부하고있는데요.먼저 블로그의 스킨이 1단형인지 2단형인지 3단형인지에따라 달라집니다.1,2단형의 경우 간단한 html/css 코드로 변경이 가능하여 시중에 판매중인 html책을 보셔도 무리없을 것으로 보입니다.그런데 반응형웹인경우 차이가 있어 블로그 글씨, 이미지 등의 넓이 조절에 대해서도 동시에 공부해야합니다. 간단한  애니매이션과 같은 기능을 넣으신다는 것은 반응형웹을 말씀하시는것같습니다. 정확히 어떤 책을 보시는것이 좋다고 말씀드리기 어려우나 저의 경우 한빛아카데미출판사의 책을 많이 참고하였습니다.그리고 간단한 폰트사이즈 변경, 색변경 등은 구글 검색에서 "html 글자 키우기" 처럼 앞에 html을 붙여 검색해주시면 많은 자료들이 있으니 참고하시면 좋을 것같습니다.

김답변 · Answer

단순히 html과 css까지만 보시려면 질문자님의 상황에는 W3School이 적절합니다답변 내용 중 링크들은 Crtl+클릭 하시면 새 탭으로 여실 수 있습니다.처음부터 보시려면 튜토리얼 페이지 (W3School html, W3School css)를 참고하시고,예제를 바로 보시려면 예제 페이지(W3School html example, W3School css example)를 참고하십시오해당 사이트에서 Try it yourself 버튼을 를 통해 직관적인 효과 확인 및 테스트/학습이 가능합니다.심화 예제를 보시려면 codepen이 적절하나, 개개인이 기능별로 올린 가이드이므로 학습에는 적합하지 않을 수 있으며, 대부분 자바스크립트가 포함되어 있으니 심화 학습 중 해당 부분까지 관심이 생기실 경우 참고하시면 됩니다.

JS2 · Answer

https://www.opentutorials.org/course/1가장 유명한 초심자 가이드 생활코딩 사이트입니다.같은 이름으로 페이스북 페이지에서 많은 개발자들이 신규 개발자를 위하여 조언 및 실질적인 도움을 주니 활용하시면 아주 좋습니다.https://www.inflearn.com/유,무료 프로그래밍 강의가 정리되어있는 인프런 사이트 입니다.이벤트 등으로 유료강의를 저렴하거나 무료로 제공하는 경우도 많고 강의 질이 생각보다 매우 좋습니다.https://okky.kr/유저들끼리의 각종 Q&A, 테크에 관련한 것들이 잘 올라오는 커뮤니티 오키 입니다.관련하여 괜찮은 무료 강의들에 URL이 올라오는 경우도 많습니다.https://programmers.co.kr/learn/challenges?language=javascript많은 기업들이 실제 채용에도 반영하는 코딩테스트 및 강좌가 개설되어있는 프로그래머스 입니다.기본적으로 강좌도 좋지만 실제로 알고리즘을 접목한 문제를 풀어볼수있는 환경을 잘 제공해줍니다.https://level.goorm.io/구름 IDE 로 유명한 구름에 코딩테스트 도구입니다.사용자가 직접 알고리즘 문제를 만들어서 게시한다던가, 구름IDE와 접목하여 실시간으로다른 인원들과 채팅하며 코딩을 가능하게 해줍니다.영어로 짧고 가볍게 들어보고 싶으시다던가.페이스북, 트위터 등을 실제로 똑같이 만드는 "클론코딩" 등이 해보고 싶으시다면https://academy.nomadcoders.co/노마드코더 에서 강의를 들어보시는걸 추천드립니다.위에 말씀드린 사이트들을 활용하시어 공부하시면 많은 도움이 되실것으로 보입니다!^^

저거슨 · Answer

일단 제가 그런부분에서 크게 도움 받은 사이트는 생활코딩입니다.단순 HTML에 대한 부분과 CSS에 대한 부분의 강의가 나누어져 있는데요CSS : https://opentutorials.org/course/2418 , https://opentutorials.org/course/718/3798HTML : https://opentutorials.org/course/2039 ,https://opentutorials.org/course/1058자바 스크립트가 없어도 충분히 할 수 있습니다CSS 애니메이션 관련해서는 보통 구글링을 통해서 필요한 기능이 있으면 해당 기능을 검색해서 사용하는데요키워드를 잘 입력하시면 -> 구글검색 ( 예 : CSS ANIMATION 기본)https://webdesign.tutsplus.com/ko/tutorials/a-beginners-introduction-to-css-animation--cms-21068이러한 내용이 나옵니다이미지관련해서는 CSS BACKGROUND IMAGE텍스트 박스 관련해서는 css textbox style 이런식으로css를 앞에 넣고 원하는 태그를 적은다음 어떠한 효과를 줄것인지 특별히 생각이 안나면 style이나 animation이나 그런 키워드를 적어보시면 사람들이 블로깅 해둔 자료들이 많이 있습니다

그레이 · Answer

안녕하세요 . html과 css를 공부 중이시군요.기초적인 지식이 없다면 내가 원하는 기능을 구현하기 위해서어떤 키워드로 검색을 해야할지 몰라서 힘들어하시는 분들도 있는데요.질문 내용을 보니 이미 블로그를 운영하시면서 어느 정도 html/css 지식이있으신 것으로 보입니다.저는 개인적으로 책이나 동영상보다는 그 때 그 때 필요한 것이 있을 때마다구글에 검색해서 찾는 것을 추천하는 편입니다.아직 기초적인 부분이 부족하다고 느껴지신다면아래 링크를 통해 인프런에서 제공하는 무료 강의를 들어보시는 것도 괜찮습니다.https://www.inflearn.com/course/html-css-%EA%B0%95%EC%A2%8C#description