본문 바로가기

프로그래밍/HTML, CSS, JavaScript63

[HTML/CSS] 텍스트 그림자 효과 꾸미기 텍스트에 그림자 효과를 주는 기능에 대하여 알아 보도록 하겠습니다. 그림자 효과 CSS를 사용하여 밋밋한 텍스트를 더욱 풍성하고 멋지게 꾸며 볼 수 있습니다. HTML/CSS 소스 ERun-Joy ERun-Joy ERun-Joy ERun-Joy ERun-Joy 브라우저 실행 결과 소스설명 - font-weight: bold; → font-weight(글자굵기) : bold(진하게) → font-weight 의 속성으로는 bold 이외에 100~900까지 100단위로 설정 할 수 있습니다. → 400은 normal과 같으며, 700은 bold와 동일합니다. 즉 숫자가 높을 수록 진하게 표시 됩니다. - text-shadow: 0px 5px 0px #FFB2F5; → text-shadow(그림자효과) : 0.. 2018. 6. 19.
[HTML/CSS] 카테고리 DIV 박스 만들기 카테고리 DIV 박스 만들기 DIV박스 만들기 예제로 카테고리 형태의 박스를 만들어 보도록 하겠습니다. 소스를 참고하여 직접 만들어 보면 도움이 될 것이라 생각합니다. 참고로 디자인 감각이 없어, 색상이 이상하네요. 이렇게 저렇게 변경 해 보아도 시간만 흘러 이대로 올려 봅니다. HTML/CSS 소스 category 여행 맛집 요리 건강 육아 브라우저 실행 결과 소스설명 - list-style: none; → 리스트 스타일의 효과(예:●)를 사용하지 않도록 설정 합니다. - #divCategory ul li { border-top: 1px solid #003399; border-bottom: 1px solid #3DB7CC; } → li(리스트항목) 위, 아래로 1px 의 각 다른 색의 실선이 표시 되도.. 2018. 6. 17.
CSS를 이용한 문자열(제목) 자르기 / white-space, text-overflow CSS를 이용하여 간단하게 문자열을 자르는 방법에 대하여 알아 보겠습니다. 목록 화면 등에서 제목을 자르는 용도로 사용하면 좋을 것 같습니다. 영역을 설정하고 그 영역에서 벗어날 경우, 내용을 자르고 생략부호를 추가하여 표시되도록 하는 방법입니다. 예제 문자열 자르기 테스트 입니다. 예제 결과 예제 CSS 속성값 설명 - white-space : nowrap 줄바꿈이 실행되지 않도록 합니다. - width: 200px 너비를 지정합니다. - overflow: hidden 설정 영역을 넘었을 경우 숨김 처리 합니다. - text-overflow: ellipsis 영역을 넘을 경우 생략부호(...) 를 사용하여 생략처리 하여 넘지 않도록 합니다. 기타 속성값 알아보기 - white-space normal →.. 2018. 5. 27.
DIV 배경이미지 변경하기 / CSS 배경설정 자바스크립트로 제어하기 DIV 배경이미지를 자바스크립트로 랜덤 제어 예제 배경이미지 변경하기 예제를 통해 DIV사용법 및 CSS 배경설정 속성 학습, 자바스크립트 난수발생 함수 등을 학습 해 보도록 하겠습니다.추가로 자바스크립트 배열도 사용하게 됩니다. 학습내용- DIV 영역 CSS를 통한 배경 설정 하기- 자바스크립트 난수 발생 함수를 통한 이미지 선택하기- DIV 태그 설정 id를 통한 배경 이미지 경로 변경하기 소스 소스설명- background-color:#464646 배경색상을 설정 합니다. - background-repeat:no-repeat 배경에 이미지를 반복해서 표시하지 않도록 설정 합니다. - background-position:center 배경이미지를 가운데로 정렬합니다. - var fileNm = ['이미.. 2018. 5. 26.