본문 바로가기

Programing/CSS37

유저 프로필 이미지, 텍스트 가운데 정렬 기법 장원영.profile-pic { /* div 동그랗게 */ width: 300px; height: 300px; border-radius: 70%; /* 요소 가운데로 */ display: block; margin: 0 auto;}.user-name { font-size: 40px; letter-spacing: 20px; text-align: center;} img같이 block 속성을 지니고 있지 않은 요소를 가운데 정렬할 때는 display: block으로 바꾸어 주고, margin: 0 auto를 준다. 자동으로 block요소를 갖고 있는 태그들은 div, p, h 등이 있다. 이 태그들은 block을 주지 않고 margin: 0 auto 만 주어도 가운데 정렬 된다. 텍스.. Programing/CSS 2024. 6. 14.
마우스 호버 시 살짝 커지는 CSS /* 필요한 CSS를 작성하고 아래 속성을 이어 붙인다 */transition: transform 0.3s ease-in-out;&:hover { transform: scale(1.2);} Programing/CSS 2024. 6. 14.
텍스트가 박스를 넘어서 렌더링 될 때 스크롤바 추가하기 텍스트가 길어서 내가 의도한 영역을 초과하여 렌더링 되는 경우가 있다. 이럴 때 해당 박스의 CSS에 overflow 속성을 주면 된다. overflow: auto; /* 스크롤 가능하도록 설정 */word-break: break-word; /* 긴 단어가 박스를 넘지 않도록 설정 */ Programing/CSS 2024. 6. 5.
margin 속성 개수에 따른 의미와 예제 margin 속성은 요소의 외부 여백을 설정하는 속성이다.margin 다음에 오는 값의 개수에 따라 설정되는 방향이 달라진다.한 개의 값 (margin: value;): 모든 방향(위, 오른쪽, 아래, 왼쪽)에 동일한 여백 적용.두 개의 값 (margin: value1 value2;):첫 번째 값(value1): 위와 아래 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 개의 값 (margin: value1 value2 value3;):첫 번째 값(value1): 위 여백두 번째 값(value2): 왼쪽과 오른쪽 여백세 번째 값(value3): 아래 여백네 개의 값 (margin: value1 value2 value3 value4;):첫 번째 값(value1): 위 여백두 번째 값(value2): .. Programing/CSS 2024. 5. 25.
내 로컬에 있는 폴더를 CSS에 적용시키는 방법 상황웹 폰트를 지원하지 않는 폰트를 별도로 설치하여 사용하고 싶다. 예를 들어 AppleSDGothicNeo 즉 애플고딕은 웹 폰트를 지원하지 않으나, 상업적 비상업적 무료로 라이센스를 지원하기 때문에 폰트를 별도로 사용 가능하다.방법원하는 폰트를 설치한다.프로젝트 폴더에 fonts라는 폴더를 만든 후 그곳에 폰트를 넣는다. (자유작명)설치한 폰트를 CSS에서 import한다.@font-face { font-family: 'AppleSDGothicNeoEB'; src: url('../fonts/AppleSDGothicNeoEB.ttf') format('truetype'),; font-weight: normal; font-style: normal;}아래처럼 여러 개 할 수도 있음.format은 폰트.. Programing/CSS 2024. 5. 18.

티스토리툴바