[어피니티 포토] 이미지를 정렬해보자

안녕하세요. 플입니다. 오늘은 어피니티포토에서 이미지를 정렬해볼게요. 1. 이미지 이렇게 이미지가 중앙 정렬이 안 맞는 경우가 있어요. 가운데! 가운데에 너무나 맞추고 싶습니다. 하지만 마우스로 정가운데에 맞추기란 쉽지 않은 일이죠. 2. 상단 메뉴 어피니티 포토의 상단 오른쪽을 봐주세요. 아마 이런 모양의 아이콘이 보이실 거예요. 이 친구는 정렬을 해주는 아주 고마운 친구랍니다. 클릭해볼까요? 3. alignment 얼라인(Align) 즉, 정렬이라는 창을 열면 이렇게 보여요. 영어는 무시하고 그림만 보셔도 대충 느낌이 오시죠? 크게 두 칸이 있는데, 위쪽은 가로 정렬 아래쪽은 세로 정렬이에요. 너무 어려워하지 마시고 그냥 막 눌러보세요. 아 이런 거구나 하고 바로 이해하실 거예요. 조금 틀리면 어떤가..

Design/Affinity · 2020. 8. 30. 07:30

[css] 글자 가운데 정렬 하기

안녕하세요. 플입니다. 오늘은 css를 이용해 글자를 가운데 정렬해보겠습니다. 1. 글자 준비 가운데 정렬을 적용할 글자를 준비합니다. 어떤 태그를 사용하던 상관없지만 정렬을 시켜주려면 block태그를 사용해야 합니다. block태그 중 글자에는 주로 , , 등을 사용합니다. 2. 가운데 정렬 h3{ text-align:center; } 글자의 정렬은 text-align을 사용해 조절해줍니다. 가운데 정렬이니 text-align의 속성 값을 center로 입력해줍니다. 코드를 입력하고 새로고침을 하면 글자가 가운데로 정렬된 것을 알 수 있습니다. 3. 다른 정렬 h3{ text-align:left; } h3{ text-align:right; } 글자 정렬의 기본 설정값은 좌측 정렬입니다. 속성 값을 입력..

coding/html + css · 2019. 11. 23. 07:30

[css] 컨텐츠 가운데 정렬하기

안녕하세요. 플입니다. 오늘은 브라우저 사이즈에 관계없이 컨텐츠를 가운데 정렬해보겠습니다. 1. 가로 사이즈 지정 ul{ width:1280px; } 우선 가로 사이즈를 지정해줍니다. 가로 사이즈는 사이트의 기본 사이즈를 정해둔 것이 있을 겁니다. 그 사이즈로 지정해주세요. 저는 1280px을 주었습니다. 최근에는 와이드 모니터가 늘어서 가로사이즈가 점점 늘어나고 있는 추세입니다. 만드는 웹사이트의 성격에 따라 사이즈가 달라지니 여러 상황을 고려해 사이즈를 정해줍니다. 저는 알아보기 쉽게 border를 넣었습니다. 보기 편하게 border를 지정한 상태로 진행하고 마지막에 제거해주셔도 됩니다. 2. 마진 이용 ul{ margin:0 auto; } 마지막으로 마진을 이용해 가운데 정렬을 해줍니다. 마진 값..

coding/html + css · 2019. 11. 5. 22:30