Front-End Developer
How to move bullet points in css?
부딪친 문제 li tag를 사용하여 Bullet이 적용되었는데, 왼쪽으로 치우져져 있었다. 이를 해결하려 css에서 li tag에 padding값을 주었으나, 결과는 Bullet들은 그대로 있고 글만 패딩값이 적용되었다. li { padding-left: 20px; } 해결방법 모든 li tag에 list-style-position Property를 inside로 지정해주었다. 아래는 검색했던 링크. https://stackoverflow.com/questions/49906604/how-to-move-bullet-points-in-css
Grouping Content
HTML 작성시 가장 중요한 것들 중 하나는 항상 그룹핑(박스모델 이라고도 한다.)을 잘 해야 한다는 건다. 이렇게 해야 하는 이유는 크게 두가지 이다. CSS styling시 가장 효율적인 방식으로 작업을 가능하게 하기 위해서. 각 태그가 가진 의미들로, Semantic HTML을 작성하기 위해서. header 보통 해당 페이지에서 가장 중요한 h1태그를 포함하는 경우가 많다. 보통 웹사이트에서 윗부분에 웹사이트의 이름, 검색창, nav 태그들과 함께 들어있다. 네이버로 예를 들면 아래 사진처럼 네이버 로고와 검색창, 아래 메뉴바들을 포함한 곳이 되겠다. nav 보통 웹페이지 header 안에서 메뉴바, 혹은 카테고리를 만들어주는게 가장 흔하게 사용되는 방식이다(이 외에도 여려군데서 쓰임) ul>li ..
What is HTML Living Standard?
HTML5이라고 우리가 흔히 부르는데, 엄밀히 말하면 그건 틀린말이다. 그건 W3C사에서 주관하는 HTML이 버전별로 나올 때 그렇게 불렀던 거고, 지금은 WHATWG사에서 주관하여 HTML Living Standard (살아있는 HTML, 버전별이 아니라 쭉 업데이트된다.)가 만들어지기 때문이다. W3C와 WHATWG의 오랜 싸움 이야기는 재밌는 역사이니 한번 찾아보기를.. 사람들은 이 전에 두 회사의 HTML 선택지가 있었을 때에도 항상 WHATWG사의 HTML을 추천했는데, 아래 WHATWG사의 majot contributer중 한 명인 개발자의 블로그 포스팅을 붙이니 참고. https://annevankesteren.nl/2016/01/film-at-11전쟁이 끝나고 지금은 통합되어서 WHATWG..
URL, IP, PORT를 쉽게 표현해보자.
URL, IP, PORT 정리 URL,도메인(Uniform Resource Locator): A URL is nothing more than the address of a given unique resource on the Web. It carries all types of names & address that refer in World Wide Web(WWW) of Internet. The term "Web Address" is Synonym of URL that uses the HTTP or HTTPS Protocol.' URL =’삼성블루밍’ What is a URL? - MDN IP(internet protocol address): it is an identifying number that is ..
이종찬님 특강 - 행복한 CSS냐 망한 CSS냐.
css는 복잡하다. 진입장벽이 쉬울 뿐, 간단한 홈페지이 하나를 만들 때에도 이걸 건들면 저게 삐걱, 저걸 건들면 이게 삐걱.. #망한다 하지만 기초를 탄탄하게, 또 꾸준히 수련을 통해서 #행복한 CSS를 만들어 줄 수 있다. css 순서 가이드 전체적인 덩어리를 먼저 나눠라. 컨텐츠부터 막 서둘러 넣지말자. 구분을 위해 각각 시각적으로 힌트를 줘야한다. 백그라운드컬러를 줌으로서 이 요소가 어떤 공간을 차지하고 있는지 쉽게 확인가능하거나, 이미지가 들어갈 곳에는 가상의 이미지를 미리 넣어줄 수도 있다. 기본 레이아웃 관련 스타일만 짠다. 안에 내용물을 막 넣기 이전에 공간부터 마련한다. 기본 margin / padding / width을 설정해주고, height 는 왠만하면 오토로 두는게 행복한 상황이다..
form 태그.
흔히 로그인페이지의 아이디, 비밀번호처럼 입력된 값을 서버로 전송할 때 사용하는 글자를 넣는 곳 / 선택하는 것들을 form이라고 부른다. 폼이 정상적으로 작동하기 위해서는 유저로부터 정보를 입력할 수 있는곳을 먼저 만들어줘야겠지? 그 때 사용하는게 input이다. input 요소 안에 type 속성으로 태그모양을 다양하게 변경 가능하다. 인풋 type 목록들 text 입력한 text를 그대로 표현해주는 input button 누를 수 있는 간단한 버튼을 만드는 input password 마스크 처리된 text input search 검색 창으로 사용할 수 있는 input date 날짜를 입력할 때 사용할 수 있는 input time 시간을 입력할 때 사용할 수 있는 input range 슬라이드 바 형..