로즈네 일상

개발자도구를 활용하면 블로그의 CSS 적용지점을 쉽게 찾아내고 변경 테스트를 해볼 수 있습니다. 이 기능을 알고, 모르고의 차이가 꽤 큰 편인데요. 블로그를 처음 수정해보는 사람들은 개발자 도구의 존재는 알아도, 이러한 기능이 있는지 여부까지는 알기 어려울 것 같아서 기능에 대하여 공유해보려 합니다.  여는글블로그를 꾸미다보면 특정 요소가 맘에는 안드는데, 수정하려고 보니 2,000~5,000줄 쯤 되는 HTML을 돌아다니다가 지쳐 나가떨어지는 때가 많습니다. 특히 구글 블로그의 경우, 기본 기능이랍시고 제공하는 부분에 하필 커스터마이징이 안되게 세팅되어있는 부분들이 종종 있어서 결국은 CSS를 찾아서 수정해야 할 때가 많더라구요. 가령 검색창의 글씨체라던가, 항상 접힌채로 있는 카테고리 문제..

구글 블로그에서 제공하는 무료 템플릿을 이용하는 경우, 기본적으로 그림 크기를 본문영역내로 제한을 두지 않습니다. 때문에 아래와 같이 삽입된 그림이 본문영역을 뚫고 나가는 문제가 발생하게됩니다.   위와 같이 그림 크기가 본문을 뚫고 나가는 일이 발생했을경우, 본문 태그에서 조금만 손 봐주시면 금방 수정 가능합니다.  위와 같이 블로그 환경설정 - 테마 - (우측창)맞춤설정 옆 화살표 - HTML에서 post-body를 찾고 그림과 같이 아래 코드를 한 줄 추가해줍니다. 그림 크기를 본문에 딱 맞추려면 100%로 하면 되겠지만, 대신 테두리에 붙어 심미성이 떨어지니 90~95% 정도로 설정하면 좋을 듯 합니다. .post-body img {max-width:95%}   참고로 여..

세팅내역을 적어두는 이유 구글블로그를 잠시밖에 사용하지는 않았지만 한가지 확실하게 알 수 있었던 점은, 블로그 구축시 사용된 태그나 변경사항을 어딘가에는 분명히 기록해두어야 한다는 점 입니다. 구글블로그를 다시 운용하게 될지는 솔직히 잘 모르겠지만, 향후 사용에 대비하여 기록을 남겨두는 게 좋을 것 같아 글로 적어보았습니다. 개별 개발자들이 만들어 둔 템플릿 사용하기 여러 사이트가 있겠지만, 제가 다운로드 받은 사이트는 아래의 구야비 템플릿(발음이 이게 맞나?)였습니다. 대부분의 사이트들이 템플릿을 직관적으로 볼 수 있도록 세팅되어있고, 라이브 데모(만들어진 페이지 확인)를 지원하므로 어디에서 보더라도 크게 상관은 없을 것 같더군요. 사이트 : https://gooyaabitemplates.com/ 초기..

여는 글 자바스크립트와 Jquery는 웹페이지에 생동감을 부여합니다. 웹페이지에서 사용되는 여러가지 기능을 구현하기 위해서는 HTML/CSS만으로는 어렵고, 상당부분 자바스크립트의 도움을 받아야 합니다. 특히 파이썬을 운용할 때에도 자바스크립트는 ⓐBeautifulSoup을 통해 웹사이트를 조작할 때, ⓑCSS 선택자 등을 사용하기에 복잡한 경우 자바스크립트의 XPath를 통해 특정 요소를 불러오거나, ⓒ이미 홈페이지에서 구현해 놓은 기능을 실행만 시키면 되는 경우에 [driver.execute_script(스크립트)]의 형태로 사용하기 위하여 이해가 필요합니다. 가령, 홈페이지에 있는 특정 단추를 눌러 자바스크립트를 실행해야 하는 상황에서, 단추를 직접 누르는 코드를 작성하는 방법이 까다로운 경우(경로..

여는 글 여기서 다룰 내용은 CSS가 웹페이지에 적용될 때 어떠한 순서로 적용되는지, CSS에 적힌 내용이 어떻게 구분되고, 각 항목별 단위가 의미하는 것은 무엇인지 알아해보고자 합니다. 파이썬보다는 블로그 작성에 조금 더 도움이 될 수 있을 것 같습니다. 블로그를 만들때에도 CSS가 중요하게 사용되지만, 웹페이지상 특정요소를 선택할때에도 CSS에 대해 아는것은 꽤나 중요한 편인데요, 이는 특정 요소를 선택하는 경우에 BeautifulSoup에서 [driver.find_element(by=By.CSS_SELECTOR, value=○○○).send_keys()]의 형태로 사용되는 경우가 많기 때문입니다. CSS의 적용방법과 우선순위 적용 순서 개요 CSS의 용도 : 글꼴이나 배경색, 너비와 높이, 위치 등..

여는 글 오늘 이 페이지에서 소개 드리는 태그들은 파이썬을 통해 웹페이지를 조작하는 경우 가장 주요하게 다뤄지는 태그들 중 하나입니다. 특히 Input 태그의 경우, ID/PW/데이터를 입력하는 데 사용되므로 더더욱 그러하죠. 특정 정보를 입력하는 웹사이트에, 엑셀로 정리해둔 정보를 순차적으로 입력하는 업무가 있다면 Input/Textarea/Button에 접근하게 될 일이 꽤 있는 편입니다. 멀티미디어 태그의 경우, 크롤링을 하는 경우에 각 멀티미디어 태그의 주소 부분을 긁어오는 형태로 사용되기도 합니다. 특정 검색 이미지의 10개 순위 이미지를 긁어온다던가 등등… 여러모로 구조 자체는 복잡하지 않으면서도 웹 페이지 내의 정보를 긁어오기 위해서는 꼭 알아야 하는 부분들이죠. 실질적으로 파이썬과 BS4를..

여는 글 글자 태그나 영역태그는 홈페이지 소스코드와 DOM을 이해하고, 코드가 화면에 표시되는 형태를 이해하는데 가장 주요한 역할을 한다. 크롤링할 웹페이지나 업무용 웹사이트에서 어떤 태그 아래에 있는 정보를 가져올 것인지를 지정할 때 이러한 구조를 형성하는 태그에 대해 알아야 빠르게 접근할 수 있다. 반면 Table 관련 태그의 경우, Table 태그를 이용하여 홈페이지를 만들던 시절은 지나갔고 그 부분은 시멘틱 코드가 차지하게 되었지만, 여전히 데이터를 일목요연하게 정리하여 표현하는 구조에서는 Table 관련 태그나 목록 코드가 사용된다. 또한 소스코드에서와 달리 DOM에서는 자동으로 생성된 Table 관련 태그, 목록 태그가 꽤나 많이 보이는 편이다. 따라서, 크롤링을 하거나 특정 요소를 선택할 때..

여는말 – 파이썬에서 HTML이 꼭 필요한가? 파이썬을 위한 기본지식으로 HTML을 소개하고자 합니다. 이는 직장인들이 파이썬을 배우는 이유 중 하나가 사무의 자동화고, 자동화해야 할 사무에는 인터넷을 통해 처리해야 할 업무들도 상당히 많기 때문입니다. 우리가 알아야 할 내용은 특정 웹페이지의 정보 흐름이 어떻게 이뤄지는가 같은 거창한 것은 아닙니다. 우리에게 필요한 것은 웹페이지를 개발자 모드로 뜯어보았을 때, 코드 덩어리와 실제 웹페이지를 매칭시킬 수 있는 능력입니다. 일반적으로 HTML은 웹 페이지의 구조와 내용을 정의하는 데 사용되고, CSS는 웹 페이지의 스타일, 레이아웃 및 디자인을 정의하는 데 사용됩니다. 그리고 자바스크립트는 각종 상호작용을 제공하기 위해 부가적으로사용됩니다(사실 안 쓴 웹..