bskyvision

오늘은 요소 사이에 구분선을 넣는 방법에 대해 알아보도록 하겠습니다. 많은 웹사이트를 보면 아래와 같이 어떤 요소들을 구분해 주기 위해서 세로 구분선을 넣어주는 경우가 많습니다. 이런 구분선을 넣어주면 전반적으로 깔끔한 느낌도 주고, 요소들 구분을 확실히 시켜주기 때문에 많이 사용합니다. 그럼, 한번 함께 만들어 가봅시다. html과 css를 활용해야 하는데, html 코드 먼저 살펴보겠습니다. 요소1 요소2 요소3 요소4 아주 간단합니다. test라는 아이디를 가진 div 요소 안에 4개의 span 요소가 있습니다. css로 꾸며주지 않은 상태에서 웹 페이지를 열어보면 다음과 같이 보일 것입니다. 요소1, 요소2, 요소3, 요소4가 순차적으로 같은 줄에 위치해 있습니다. span 태그를 사용했기 때문입..

html 에서 어떤 요소에 대해서 종횡비(aspect-ratio), 즉 가로세로비율을 지정해서 유지하고 싶은 경우가 있습니다. 이게 생각보다 구현하기가 쉽지 않습니다. 다행히 css에는 이것과 관련해서 아주 좋은 속성이 있습니다. 바로 aspect-ratio 속성입니다. 설명을 위해 간단한 test라는 아이디를 가진 div 요소를 만들겠습니다. aspect-ratio 속성 이제 이 div 요소를 css로 꾸며주겠습니다. 배경색은 빨간색으로 줄 것이고, 가로 길이는 40%로 설정해줄 것입니다. 브라우저 화면의 40%를 차지할 것입니다. 또한 마지막으로 aspect-ratio를 4:3으로 해서 종횡비가 4:3이 되도록 하겠습니다. #test { background-color:red; width: 40%; a..

html의 input 태그와 textarea 태그는 무언가를 입력할 때 자주 사용되는 태그들입니다. input 태그의 경우 아이디, 비밀번호와 같이 짧은 것을 입력할 때 많이 사용되고, textarea 태그는 문장을 입력할 때 주로 사용됩니다. 무언가를 입력하기 위해 input 박스와 textarea 박스를 클릭하면 기본적으로 검은색의 굵은 테두리가 생성됩니다. 만약 이 테두리를 없애고 싶다면 :focus 의사 클래스를 사용하여야 합니다. :focus 의사 클래스란 입력 폼을 클릭된 상태를 의미합니다. textarea:focus { outline: none; } outline 속성을 none으로 해주면 다음 이미지와 같이 입력 폼을 클릭했을 때 더이상 굵은 테두리로 강조되지 않습니다.

자간을 조절하려면 CSS의 letter-spacing 속성을 사용하면 됩니다. 바로 예제 코드를 보시죠. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Document 안녕하세요. 저는 비스카이비전입니다. 안녕하세요. 저는 비스카이비전입니다. 안녕하세요. 저는 비스카이비전입니다. Colored by Color Scripter cs 이 웹페이지를 열어보면 다음과 같은 화면이 보입니다. letter-spacing 속성에 큰 값을 줄 수록 자간이 넓어지는 것을 확인하실 수 있습니다. 참고로 줄간격(행간)을 조절하는 속성은 line-height입니다.

요즘 셀레니움(selenium)을 이용해서 크롤링을 하고 있습니다. 지금까지의 느낌으로는 예전에 사용해본 beautifulsoup보다 훨씬 사용하기 쉬운 것 같습니다. 어떤 링크나 버튼을 클릭할 때 click() 함수를 사용하곤 합니다. driver.find_element_by_css_selector("css 셀렉터").click() 그런데 어떤 이유인지는 정확히 몰라도 click() 함수가 안 먹힐 때가 있더라고요. 이때는 send_keys(Keys.ENTER) 함수를 사용하면 대부분 문제가 해결됩니다. driver.find_element_by_css_selector("css 셀렉터").send_keys(Keys.ENTER) 물론 css 셀렉터 부분에는 여러분이 크롤링하고자 하는 요소의 선택자(셀렉터,..

a 태그를 이용해서 링크를 달면 기본적으로 밑줄이 쳐집니다. 그런데 만약 밑줄이 없는 링크를 보여주고 싶다면 어떻게 해야할까요? 이때는 a 요소의 CSS에서 text-decoration 속성의 값을 none으로 해주면 됩니다. a { text-decoration: none; } 그러면 링크에 밑줄이 쳐지지 않습니다. 어렵지 않죠? ㅎㅎ 위 예제의 전체 코드는 다음과 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 Document a { text-decoration: none; } bskyvision Colored by Color Scripter cs 관련 글 ☞ [css] 밑줄 여유있게 치기 ☞ [css] 링크 효과 관련 a:link, a:visited, ..

.css 파일을 보면 꺽쇠 > 를 종종 보곤 합니다. 이 친구가 등장했을 때는 어떤 역할을 하는지 간단한 예제를 통해 알아보겠습니다. 우선 다음과 같은 html 코드 블럭이 있다고 가정하겠습니다. 이 상황에서, 다음과 같은 css 코드로 꾸며준다면 어떻게 될까요? 결과는 "안녕1", "안녕2" 모두 빨간색으로 표현됩니다. "아이디가 test인 요소 내 모든 p 요소들의 색상을 빨강으로 해줘"라는 의미가 되기 때문입니다. 반면, 다음과 같은 css 코드로 꾸며주면 "안녕1"만 빨강으로 표현됩니다. 이렇게 되는 이유는 #test와 p 사이의 꺽쇠(>) 때문입니다. 꺽쇠가 추가됨으로 위 css 코드는 #test 요소 내 p 요소들 중에 자식인 p 요소에 대해서 빨강색을 적용하라는 의미가 됩니다. 이 경우는 손..

팝업 사이드바를 갖고 있는 웹사이트들은 대체로 열려 있는 팝업 사이드바의 외부를 클릭하면 닫히게 해놓았습니다. 사용자가 느끼기에 그것이 직관적이라고 생각해서 누군가 개발했고 이후에 유행한 것 같습니다. 팝업 사이드바 열 때 -> 버튼 클릭 팝업 사이드바 닫을 때 -> 사이드바 외부 클릭 이렇게 작동하도록 한번 코드를 구현해보겠습니다. 제가 해본 방식 말고도 다양한 방법이 있을 수 있으니, 더 좋은 코드가 있다면 그것을 사용하셔도 좋습니다. 코딩이란 것은 그런 거니까요. 먼저 결과물을 보겠습니다. 버튼을 클릭하면 사이드바가 열리고, 사이드바 외부 영역을 클릭하면 닫힙니다. 이것을 만들기 위해서는 두 개의 문서가 필요한데, 하나는 html 파일이고, 하나는 css 파일입니다. 또한 jquery, font a..

웹사이트에 좀 더 입체감을 주기 위해서 어떤 요소는 볼록 튀어나오게 해준 경우가 있고, 어떤 요소는 오목하게 들어가게 해준 경우들이 있습니다. css의 box-shadow 속성을 활용하면 가능합니다. index.html 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 Document bskyvision 환영합니다 Colored by Color Scripter cs style.css 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 #container1 { margin: auto; width: 300px; height: 300px; text-align: center; box-shadow: 1px 1px 3px 1px #dadce0; } #..

기본 스크롤바는 다음과 같이 생겼습니다. 스크롤바를 좀 더 이쁘게 꾸미고 싶다면, ::-webkit-scrollbar, ::-webkit-scrollbar-thumb, ::-webkit-track 등의 의사요소(또는 가상요소)를 다뤄야 합니다. 스크롤바의 너비를 5px로, 스크롤바의 색은 검정으로, 스크롤바의 트랙 색상은 노란색으로 해보겠습니다. 코드는 다음과 같습니다. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 Document #test { width: 200px; height: 400px; overflow: auto; } #test::-webkit-scrollbar { width: 5..