반응형 CSS4 [Express / jQuery] RSS 서비스 활용 (node.js로 xml 파싱하기) RSS 서비스 (Rich Site Summary) rss는 블로그나 뉴스 , 기상청처럼 컴텐츠 업데이트가 자주 일어나는 웹사이트에서 업데이트된 정보를 쉽게 사용자에게 전달하기 위해서 xml 기반의 데이터 배포 형식입니다. 이번 실습에서는 JTBC의 RSS를 이용하겠습니다. https://news.jtbc.joins.com/Etc/RssService.aspx 이중에서 골라서 rss를 이용하시면 됩니다. 스포츠 rss를 가지고 실습해 보겠습니다. http://fs.jtbc.joins.com/RSS/sports.xml 주의할것은 위에 스크린샷처럼 https 말고 http로 바꿔야합니다. 그 rss 주소로 가보면 xml파일을 어떤 태그를 중심으로 파싱해야하는지 알 수 있습니다. title , link의 정보를 .. 2022. 6. 14. [html/CSS] div 가운데 정렬 하는법 자식 태그를 가운데 정렬하기 위해서는 부모와 자식 둘다 CSS 설정을 해야합니다. 우선 앞서 가시화 속성인 display 속성을 먼저 알아야하는데요, display 속성에는 block과 inline-block 속성이 있습니다. block display 속성이 block으로 지정된 엘리먼트는 전후 줄바꿈이 들어가 다른 엘리먼트들을 다른 줄로 밀어내고 혼자 한 줄을 차지합니다. ex) div inline-block display 속성이 inline으로 지정된 엘리먼트는 전후 줄바꿈 없이 한 줄에 다른 엘리먼트들과 나란히 배치됩니다. ex) span 여러 엘리멘트를 한 부모안에 정렬하고 싶으면 inline-block을 써야겠죠?? 부모태그를 outer , 자식(정렬해야하는 태그)를 inner로 지정하고 할게요.. 2022. 4. 15. [html/CSS] position , overflow 속성으로 레이아웃 배치 , float 사용시 주의사항 CSS3 position 속성 top, left, right, bottom 속성과 함께 사용합니다. 상대적 위치 좌표 사용 static : 기본값. 태그들을 위에서 아래로 차례대로 배치. float -> 옆으로 배치 relative : static으로 초기 위치가 정해진 곳에서 상하좌우로 추가 이동 절대적 위치 좌표 사용 absolute : 절대적 위치 '좌표' fixed : 화면을 기준으로 화면 상의 절대적 위치 좌표 설정 absolute 사용 시 주의사항 절대적인 좌표를 이용한 것이기 때문에 부모블럭과 겹치게 된다. => 부모태그가 영역을 차지하지 않는다. 해결책 부모에게 height속성을 입력한다. => 부모 태그가 영역을 차지합니다. 부모의 position속성을 relative 키워드로 적용한다... 2022. 4. 14. [html/CSS] CSS3로 웹페이지 스타일 설정하기 결과 스크린샷! 첨부한 html 파일을 크롬브라우저로 열어보세요! 제 첨부파일을 에디터(sublime Text/VScode)로 열어보면 소스코드와 내용 다 볼 수 있습니다. 사진은 html파일과 같은 폴더에 있어야지 보일것입니다.(상대경로로 설정했기 때문!) 상단에 탭바에 있는 html5 , CSS3 , PHP 메뉴 위에 마우스를 올려보세요! 메뉴블럭이 검은색으로 변하고 글자색이 바뀔겁니다. (CSS3 위에 마우스를 올려놓은 상태) 카테고리, 최근 글등 사이드 바도 추가된게 보입니다. 잘봤나용?? CSS style이 없으면 밑에 사진처럼 나오겠죠?? 이 프로젝트는 CSS를 이용한 프로젝트니까 기초는 제 첫 포스트 먼저 보고 오세요!! CSS(Cascading Style Sheets)는 문서의 스타일을 지.. 2022. 4. 10. 이전 1 다음
