html4 #4. position속성으로 이미지 위에 글씨 쓰기 안녕하세요! 오랜만에 글을 쓰러 왔어요~ 오늘은 html 속성 중 "position"이라는 속성에 대해서 알아가면서 코딩을 처음 시작하신 분들은 조금 헷갈려 하실만 한 어떻게 글씨를 이미지 위에 쓰지?에 대한 코딩을 다뤄보도록 할거에요. 저도 처음에 코딩을 하면서 매번 헷갈려서 인터넷을 찾아보곤 했어요. 먼저 position 속성이 무엇인지 부터 알아볼게요. position은 단어 뜻 그대로 '위치'인데요. 화면에 어떻게 배치를 할지 정해주는 요소에요. 제가 오늘 다룰 position 속성은 absolute, relative이 두 가지 속성인데 이 외에도 static, fixed 두가지가 있어요. 다음 글에는 fixed를 이용한 코딩을 가져올게요! 이제 코드를 살펴보겠습니다. 이미지 안에 글씨 넣기 이렇.. 2023. 8. 23. #3. box-shadow 속성, html 박스에 그림자 속성 넣기 안녕하세용~ 오늘은 box-shadow 속성에 대해서 글을 써보려고 해요. box-shadow 속성이 무엇이냐! 말 그대로 원하는 클래스에 그림자를 넣어줘서 코딩에 입체감을 줄 수 있는 css효과에요! 이런식으로 공중에 붕~ 떠있는 것 같은 효과를 주는 속성이에요. 자칫 밋밋해보일 수 있는 박스에 살짝 준 효과로 훨씬 보기에 좋아졌어요! box-shadow속성에는 기본적인 문법틀이 있어요. { box-shadow : x-position | y-position | blur | spread | color } 이게 기본 속성입니다! 풀어서 설명을 하면? x-position : 가로로 몇 px을 넓힐것인가? y-position : 세로로 몇 px을 넓힐것인가? blur : 얼마나 부드럽게 만들것인가? sprea.. 2023. 8. 3. #2. display:flex 속성, 글자 가로 정렬하기, 2개씩 정렬하기 오늘은 코딩에서 자주쓰이는 글자 가로정렬에 대해서 글을 쓸거에요~!! 글씨뿐만 아니라 이미지를 가로로 정렬하고 싶을 때도 유용하게 쓰이는 코드니까 꼭 저장해두시고 써먹을 수 있길 바래용 ㅎ.ㅎ 안녕하세요 반갑습니다 감사합니다 배고픕니다 오늘도 list클래스로 ul, li속성을 코딩해줍니다. 그럼 기본적으로 나오는 코딩 결과는 세로로정렬이돼요. 설명 전에 전체적인 코드 한 번 보고 가겠습니다. HTML 안녕하세요 반갑습니다 감사합니다 배고픕니다 CSS .list {display: flex; justify-content: space-between; flex-wrap: wrap;} .list li {width: calc(100% / 2);} 이제 하나하나 설명해볼까용~ 우리는 코딩을 하면서 항상 세로로만 넣을.. 2023. 7. 10. #1. li list-style 모양 바꾸기, li 앞에 기호 넣기[before] 내가 코딩을 하면서 유용하거나 한 번쯤은 궁금해할 것 같은 것들을 정리해보기로 했다. 제일 첫 번째로 올리고 싶었던 건 바로 li 앞에 오는 모양을 바꾸는 것! 홈페이지를 만들게 되면 리스트를 나열할 일이 꼭! 생긴다. 이럴 때 ul과 li를 사용해서 리스트를 작성하게 되는데 list-style : none;을 해주게 되면 앞에 기호가 사라진다. none을 해준 후 앞에 기호를 다시 나타내고싶을 때 풀어주면 그만이지만 모양이 마음에 안 들 때가 있다. 그럴 때 사용하는 방법을 알려주는 시간이다! - 안녕하세요 왕응애의 일상 블로그입니다. - 왕응애는 웹디자이너로 일 하고 있습니다. - 쓸 말이 없지만 예시를 위해 - 열심히 적고 있습니다. 리스트를 코딩하면 이런식으로 작성을 할 수 있다. 그런데 코딩할 .. 2023. 7. 7. 이전 1 다음
