본문 바로가기 메뉴 바로가기

IT 기록

프로필사진
  • 글쓰기
  • 관리
  • 태그
  • 방명록
  • RSS

IT 기록

검색하기 폼
  • 분류 전체보기 (63)
    • QA (10)
      • CSTS (0)
      • 자동화 (1)
      • Selenium (1)
      • Appium (4)
      • 업무 지식 (2)
    • 공부 (51)
      • HTML, CSS (13)
      • Git (2)
      • Spring, Jsp (10)
      • Oracle (4)
      • Python (1)
      • API (1)
      • Java (7)
      • MYSQL (8)
      • 안드로이드 (1)
      • JavaScript (3)
      • node.js (0)
      • Vue.js (1)
    • 기타 (2)
  • 방명록

공부/HTML, CSS (13)
프런트엔드 웹 디자인 용어 (계속 추가)

타이포그래피 타이포그래피(Typography)는 글자를 활용한 모든 디자인을 가리키는 말. 글꼴 선택, 글자 크기, 이미지와 글자를 함께 구성하는 레이아웃까지 대표하는 용어. 서체 종류 Serif: 획의 끝 부분이 돌출된 서체 (한글: 명조체, 외국어: 로만체) Handwriting: 손글씨 서체 Sans Serif: 세리프가 없는 서체, 가로획과 세로 획의 굵기가 같음 (한글: 고딕체) Monospace: 고정폭 서체 Display: 화면용 서체 Script: 붓이나 연필로 쓴 듯한 서체, 영문 폰트에 자주 사용.

공부/HTML, CSS 2019. 3. 27. 16:25
[css] 배경 이미지 background-image

1234567891011121314 /*배경 이미지 넣기*/ background-image: url("../images/apple.jpg"); /*이미지 반복*/ background-repeat: no-repeat; /* 배경 이미지 사이즈 */ background-size: cover; /* 배경 이미지 위치 가로: left, center, right 세로: top, center, bottom */ background-position: left top;cs

공부/HTML, CSS 2019. 2. 19. 21:25
[css] box-shadow 그림자 주기

123456.content { height: 300px; margin: 100px; background-color: blue; box-shadow: 30px 20px 5px 10px #4682b4;}Colored by Color Scriptercs box-shadow: 가로위치, 세로위치, 흐림 정도, 그림자 크기, 그림자 색

공부/HTML, CSS 2019. 2. 19. 21:04
overflow: scroll

12345.content { height: 300px; padding: 10px; overflow: scroll; }cs overflow: scroll을 하면 넘치는 내용은 scroll해서 볼 수 있음. overflow: auto를 하면 넘치는 내용이 있을 때만 scroll바가 생김.overflow: hidden을 하면 넘치는 내용이 숨겨짐.

공부/HTML, CSS 2019. 2. 19. 20:52
[css] 테두리 주기(border)

1234.info { border: 3px solid #4d5fff; border-radius: 30px;}cs 테두리 선의 두께, 스타일, 선 색깔 순으로 값을 적어줌.solid는 실선, dotted는 점선, dashed는 점선인데 좀 더 선이 넓음. border-radius는 요소의 모서리를 둥글게 만듬.값이 클 수록 더 둥글게 됨. border-top-left-radius : 왼쪽 위border-bottom-right-radius: 오른쪽 아래 와 같이 개별로도 줄수있음.

공부/HTML, CSS 2019. 2. 19. 20:43
a태그 가운데 정렬하기

123 다음cs a태그를 display:block 요소인 div태그로 감싸줌. 123.atag { text-align: center;}cs div태그에 text-align: center을 하면 a태그가 가운데 정렬 됨.

공부/HTML, CSS 2019. 2. 19. 20:28
사진 가운데 정렬

12345#logo { display: block; margin-left: auto; margin-right: auto;}cs logo이미지에 id= logo를 주고 css에 위와 같이 적으면 됨.

공부/HTML, CSS 2019. 2. 19. 20:20
[css] 폰트 파일사용하기

123456789@font-face { src: url("../fonts/A_otf.otf"); font-family: "Afont";} p { font-family: "Afont";}Colored by Color Scriptercs fonts폴더 안에 A_otf.otf 폰트 파일이 들어있음.src에는 파일 경로를 적어줌.font-family는 내 마음대로 폰트의 이름을 적음.그리고 p태그(내가 적용하고 싶은 부분)에 font-family를 적어주면 됨.

공부/HTML, CSS 2019. 2. 19. 20:07
[HTML] a태그(링크) 가운데 정렬

1. block요소의 태그로 감싸고 네이버 2. css 적용 p{ text-align: center; }

공부/HTML, CSS 2018. 12. 6. 22:01
JavaScript를 이용한 row 값 모달로 전달하기

getElementById(): 찾으려는 요소 ID를 매개변수로 받아 해당 요소를 찾아 반환, 존재하지 않으면 null. getElementsByTagName(): 요소의 태그 이름을 매개변수로 받고, 그 요소가 담긴 List 반환. > 표 row해당 tr 부분 클릭시 PopupEmpInfo() 함수로 이동. ${li.emnum} ${li.dname} ${li.tname} ${li.name} ${li.position} > PopupEmpInfo()사원 정보를 순서대로 모달에 적용변수 row_td에 td태그 리스트를 받음변수 modal에 modal_emp_info 요소 정보를 받음innerHTML은 “emp_info_emnum” 요소의 내용을 바꿀수있음.innerHTML을 이용하여 “emp_info_emn..

공부/HTML, CSS 2018. 7. 17. 21:42
이전 1 2 다음
이전 다음
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG
  • mysql
  • 파이썬 파일 인식 안됨
  • Python 인식 오류
  • java
  • SW 문제 해결
  • appium session
  • 초보 개발자
  • SQA
  • QA
  • 프로젝트
  • QA 자동화
  • selenium오류
  • WebDriverException 오류
  • Spring
  • selenium error
  • appium
  • appium오류
  • 오류
  • Python 파일 인식 불가
  • Trouble Shooti
  • 앱피움
  • oracle
  • 프로그래밍
  • Python 인식 안됨
  • appium error
  • Python 파일 인식
  • QA 이슈 해결
  • jsp
  • WebDriverException error
  • 소프트웨어지식
more
«   2025/06   »
일 월 화 수 목 금 토
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
글 보관함

Blog is powered by Tistory / Designed by Tistory

티스토리툴바