코딩공부

웹페이지 맛보기 (HTML/CSS)

FeelsKim 2022. 9. 1. 23:42

최근 코드업(CodeUp)에서 파이썬 기초 100문제를 풀면서 코딩이라는 것을 접해보기 시작했는데 

마지막에 어려운 문제들만 남으니 이상하게 손이 가지 않는건 왜일까..

 

보통 비전공자들이 코딩에 입문하기 위한 방법으로

웹페이지(HTML/CSS/JavaScript)를 만들어보길 많이들 추천하는것 같다.

웹페이지 작성에 필요한 언어들이 C언어나 Java, Python같은 프로그래밍 언어보다 비교적 쉽고,

즉각적으로 구현된 결과물을 바로바로 확인할 수 있기 때문이다. 

 

사실 HTML은 직장에 다녔을때 배워보고 싶은 것 중 하나였다.

웹개발자는 아니었지만 유통업체에서 영업직으로 일하면서

여러 오픈마켓들을 관리했었는데, 기획전이나 상세페이지 수정을 해야할때마다

솔루션 프로그램에서 HTML로 일괄수정이 가능했기 때문이다.

(당시 그걸 다루시던 분은 마케팅팀 부장님뿐이었던걸로 기억한다.)

 

(출처: 유튜브 '타모디자인')

 

여튼

이번엔 '타모디자인'이라는 유튜브채널을 통해 배워보았다.

기초적인 개념과 기능들을 정석대로 하나하나 알려주는것보다

바로 직접 만들면서 주요기능들을 전체적으로 다루는 영상인데,

큰 틀에서 훑고 그 뒤에 필요한 부분에 대해 세세하게 들어가는 탑다운 방식이

빨리 감을 잡기에 좋은것 같다.

 

 

음...

 

 

영상에 나온것들을 똑같이 따라하면서 이것저것 넣어봤는데

일단 위 페이지에서 가장 기억나는건 

radio와 checkbox의 차이(radio:중복선택 불가능 / checkbox:중복선택 가능)와

a태그(링크 걸기) 정도?

 

 

(출처: 유튜브 '타모디자인')

 

 

첫 페이지는 비교적 쉽게쉽게 따라할 수 있어서 바로 다음 영상으로 넘어갔다.

여기서부터 좀 헷갈리더라

 

 

휘황찬란

 

여기서 헷갈렸던 개념이 선택자(Selector)에서의 부모-자식요소였다.

프로그래밍 언어의 조건/반복문과 달리 그저 하위요소들의 나열인듯 싶다가도

좀 더 들어가보니 하위요소와 자식요소가 다르질 않나,

여기에 첫째,둘째 하는 형제요소라는게 또 있단다.. 

(어릴적 큰아버지께서 보여주시던 족보를 보는 느낌)

 

저기서 헷갈린 상태로 어거지로 나머지 부분도 일단 쭉 훑었는데, 

솔직히 뒤에 포지션 부분은 기억도 잘 안난다.. ㅋ

 

일단 많이 다뤄보면서 익숙해져야 할 것 같다.