03-02 회원가입 질문

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

[03-02] CSS 정렬

해결된 질문

작성

127

왼쪽처럼 입력하는 박스를 박스모양이 아니라 밑줄만 나오게 하려면 어떻게 해야하나요?

react react-native 하이브리드-앱 graphql next.js

답변 2

코드캠프

지식공유자

한혜원님,

안녕하세요! input 태그에 CSS 특성을 주는 방법으로 가능합니다.

input[type="text"],

input[type="password"] {
border: none; /* 기본 테두리를 없앱니다 /
border-bottom: 1px solid #000; / 밑줄을 추가합니다 /
outline: none; / 포커스 시 나타나는 외곽선을 없앱니다 */
}

위 예시처럼 border, border-bottom, outline 등의 특성을 참고해보시면 됩니다.
CSS에서는 많은 특성이 있기 때문에, 자주 쓰이는 것은 외울 수 있게 되지만
그렇지 않는 것들은 문서를 보면서 방법을 찾아가시면 됩니다.

아래 CSS 특성을 설명하는 문서를 참고해주시면 되고, 수업에서 소개한 특성들은 자주 쓰이는
것들임으로 특히 더 학습해두시면 도움이 됩니다.
https://developer.mozilla.org/ko/docs/Web/CSS

한혜원님의 성장을 응원하겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 한혜원님께서 질문하신 입력 박스를 밑줄 형식으로 변경하는 방법에 대해 알려드리겠습니다.

입력 박스의 테두리를 밑줄만 남기고 없애려면 CSS를 사용하여 border 속성을 조정하면 됩니다. 다음은 예시 코드입니다:

input[type="text"],
input[type="password"] {
    border: none; /* 기본 테두리를 없앱니다 */
    border-bottom: 1px solid #000; /* 밑줄을 추가합니다 */
    outline: none; /* 포커스 시 나타나는 외곽선을 없앱니다 */
}

위 코드를 HTML 파일의 스타일 부분에 추가하시면, 입력 박스의 전체 테두리가 없어지고 밑줄만 남게 됩니다.

비슷한 질문에 대한 참고 자료로 다음 게시물을 추천드립니다:

이 링크들은 회원가입 양식과 관련된 CSS 스타일링의 여러 측면을 다루고 있습니다. 특히 회원가입 페이지 제작과 관련된 다양한 팁과 코드를 제공하여 혜원님께서 궁금하신 사항에 더 도움이 될 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변

03-02 회원가입 질문